
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
        <meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface">
      
      
        <meta name="author" content="Hieromon Ikasamo">
      
      
        <link rel="canonical" href="https://Hieromon.github.io/AutoConnect/achandling.html">
      
      
        <link rel="prev" href="acjson.html">
      
      
        <link rel="next" href="acinteract.html">
      
      <link rel="icon" href="assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.9">
    
    
      
        <title>Handling the custom Web pages - AutoConnect for ESP8266/ESP32</title>
      
    
    
      <link rel="stylesheet" href="assets/stylesheets/main.0d440cfe.min.css">
      
        
        <link rel="stylesheet" href="assets/stylesheets/palette.2505c338.min.css">
      
      

    
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="css/paragraph.css">
    
      <link rel="stylesheet" href="css/extra.css">
    
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
    
    <script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  


  
  


  <script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","G-EHK8XV10VE"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","G-EHK8XV10VE",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-EHK8XV10VE",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>

  
    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
  

    
    
    
  </head>
  
  
    
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
  
    
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#page-container-component" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

<header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="index.html" title="AutoConnect for ESP8266/ESP32" class="md-header__button md-logo" aria-label="AutoConnect for ESP8266/ESP32" data-md-component="logo">
      
  <img src="images/arduino-logo.svg" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            AutoConnect for ESP8266/ESP32
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Handling the custom Web pages
            
          </span>
        </div>
      </div>
    </div>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    Hieromon/AutoConnect
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    


<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="index.html" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo" aria-label="AutoConnect for ESP8266/ESP32" data-md-component="logo">
      
  <img src="images/arduino-logo.svg" alt="logo">

    </a>
    AutoConnect for ESP8266/ESP32
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    Hieromon/AutoConnect
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="index.html" class="md-nav__link">
        Overview
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="gettingstarted.html" class="md-nav__link">
        Getting started
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="menu.html" class="md-nav__link">
        AutoConnect menu
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="basicusage.html" class="md-nav__link">
        Basic usage
      </a>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
      
      
      
        <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
          Advanced usage
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_5">
          <span class="md-nav__icon md-icon"></span>
          Advanced usage
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="advancedusage.html" class="md-nav__link">
        Advanced usage
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adconnection.html" class="md-nav__link">
        AutoConnect WiFi connection control
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adcpcontrol.html" class="md-nav__link">
        Captive portal control
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adnetwork.html" class="md-nav__link">
        Settings and controls for network and WiFi
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adauthentication.html" class="md-nav__link">
        Authentication settings
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adcredential.html" class="md-nav__link">
        Credential accesses
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adexterior.html" class="md-nav__link">
        Customizing page appearance
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adothers.html" class="md-nav__link">
        Other operation settings and controls
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
    
  
  
    
    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" checked>
      
      
      
        <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
          Custom Web pages
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="true">
        <label class="md-nav__title" for="__nav_6">
          <span class="md-nav__icon md-icon"></span>
          Custom Web pages
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acintro.html" class="md-nav__link">
        Custom Web pages with AutoConnect
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acelements.html" class="md-nav__link">
        AutoConnectElements
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acjson.html" class="md-nav__link">
        Custom Web pages with JSON
      </a>
    </li>
  

            
          
            
              
  
  
    
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          Handling the custom Web pages
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="achandling.html" class="md-nav__link md-nav__link--active">
        Handling the custom Web pages
      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#page-container-component" class="md-nav__link">
    Page, Container, Component
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#custom-web-page-handler-programming-model" class="md-nav__link">
    Custom Web page handler programming model
  </a>
  
    <nav class="md-nav" aria-label="Custom Web page handler programming model">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#parameters-for-the-customwebagehandler" class="md-nav__link">
     Parameters for the customWebageHandler
  </a>
  
    <nav class="md-nav" aria-label=" Parameters for the customWebageHandler">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#1-reference-to-the-autoconnectaux-instance" class="md-nav__link">
    1. Reference to the AutoConnectAux instance
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#2-reference-to-the-pageargument-instance" class="md-nav__link">
    2. Reference to the PageArgument instance
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#3-access-to-the-autoconnectelement-values" class="md-nav__link">
    3. Access to the AutoConnectElement values
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-customwebpagehandler-return-value" class="md-nav__link">
     The customWebpageHandler return value
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#handing-autoconnectelements-with-the-sketches" class="md-nav__link">
    Handing AutoConnectElements with the Sketches
  </a>
  
    <nav class="md-nav" aria-label="Handing AutoConnectElements with the Sketches">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#add-autoconnectelements-to-the-autoconnectaux-object" class="md-nav__link">
     Add AutoConnectElements to the AutoConnectAux object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#get-autoconnectelement-from-the-autoconnectaux" class="md-nav__link">
     Get AutoConnectElement from the AutoConnectAux
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#enable-autoconnectelements-during-the-sketch-execution" class="md-nav__link">
     Enable AutoConnectElements during the Sketch execution
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#loading-saving-autoconnectelements-with-json" class="md-nav__link">
    Loading &amp; saving AutoConnectElements with JSON
  </a>
  
    <nav class="md-nav" aria-label="Loading &amp; saving AutoConnectElements with JSON">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#loading-autoconnectaux-autoconnectelements-with-json" class="md-nav__link">
     Loading AutoConnectAux &amp; AutoConnectElements with JSON
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#saving-autoconnectelements-with-json" class="md-nav__link">
     Saving AutoConnectElements with JSON
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#custom-field-data-handling" class="md-nav__link">
    Custom field data handling
  </a>
  
    <nav class="md-nav" aria-label="Custom field data handling">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#where-to-pick-up-the-values" class="md-nav__link">
     Where to pick up the values
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#when-setting-the-initial-values" class="md-nav__link">
     When setting the initial values
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#how-you-can-reach-the-values" class="md-nav__link">
     How you can reach the values
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#get-autoconnectelement-values-from-the-transition-source" class="md-nav__link">
     Get AutoConnectElement values from the transition source
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#transfer-of-input-values-across-pages" class="md-nav__link">
     Transfer of input values across pages
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#retrieve-the-values-with-webserveron-handler" class="md-nav__link">
     Retrieve the values with WebServer::on handler
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#overwrite-the-autoconnectelements" class="md-nav__link">
     Overwrite the AutoConnectElements
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#check-data-against-on-submission" class="md-nav__link">
     Check data against on submission
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#input-data-validation" class="md-nav__link">
     Input data validation
  </a>
  
    <nav class="md-nav" aria-label=" Input data validation">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#common-declaration" class="md-nav__link">
    Common declaration
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-autoconnectinputisvalid" class="md-nav__link">
    Using AutoConnectInput::isValid
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-autoconnectauxisvalid" class="md-nav__link">
    Using AutoConnectAux::isValid
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#convert-data-to-actually-type" class="md-nav__link">
     Convert data to actually type
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#place-html-elements-undefined-in-autoconnectelements" class="md-nav__link">
    Place HTML elements undefined in AutoConnectElements
  </a>
  
    <nav class="md-nav" aria-label="Place HTML elements undefined in AutoConnectElements">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#place-a-markup-or-a-styled-html-tag" class="md-nav__link">
     Place a markup or a styled HTML tag
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#place-the-input-elements-within-a-form" class="md-nav__link">
     Place the input elements within a form
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-javascript" class="md-nav__link">
     Using JavaScript
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#custom-web-pages-communication-without-page-transitions" class="md-nav__link">
    Custom Web pages communication without page transitions
  </a>
  
    <nav class="md-nav" aria-label="Custom Web pages communication without page transitions">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#communicate-with-the-sketch-using-xhr" class="md-nav__link">
     Communicate with the Sketch using XHR
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#interact-with-sketches-by-autoconnectelements-event" class="md-nav__link">
     Interact with sketches by AutoConnectElements event
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#transitions-of-the-custom-web-pages" class="md-nav__link">
    Transitions of the custom Web pages
  </a>
  
    <nav class="md-nav" aria-label="Transitions of the custom Web pages">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#scope-lifetime-of-autoconnectaux" class="md-nav__link">
    Scope &amp; Lifetime of AutoConnectAux
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-uri-of-the-custom-web-pages" class="md-nav__link">
    The URI of the custom Web pages
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#an-http-response-from-the-custom-web-page-handler" class="md-nav__link">
    An HTTP response from the custom Web page handler
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#limitations" class="md-nav__link">
    Limitations
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acinteract.html" class="md-nav__link">
        Interact between Sketch and AutoConnectElements
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
      
      
      
        <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
          OTA Updates
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_7">
          <span class="md-nav__icon md-icon"></span>
          OTA Updates
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="otaupdate.html" class="md-nav__link">
        OTA Updates
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="otabrowser.html" class="md-nav__link">
        OTA via Web Browser
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="otaserver.html" class="md-nav__link">
        OTA using Update Server
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="filesystem.html" class="md-nav__link">
        Using Filesystem
      </a>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" >
      
      
      
        <label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0">
          Library APIs
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_9">
          <span class="md-nav__icon md-icon"></span>
          Library APIs
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="api.html" class="md-nav__link">
        AutoConnect API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiaux.html" class="md-nav__link">
        AutoConnectAux API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiconfig.html" class="md-nav__link">
        AutoConnectConfig API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apielements.html" class="md-nav__link">
        AutoConnectElements API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiupdate.html" class="md-nav__link">
        AutoConnectUpdate API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiextra.html" class="md-nav__link">
        Something extra
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" >
      
      
      
        <label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0">
          Examples
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_10">
          <span class="md-nav__icon md-icon"></span>
          Examples
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="howtoembed.html" class="md-nav__link">
        How to embed
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="datatips.html" class="md-nav__link">
        Tips for data conversion
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="menuize.html" class="md-nav__link">
        Attach the menus
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="wojson.html" class="md-nav__link">
        Custom Web pages w/o JSON
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="esp32cam.html" class="md-nav__link">
        Works with ESP32-CAM
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_11" >
      
      
      
        <label class="md-nav__link" for="__nav_11" id="__nav_11_label" tabindex="0">
          Appendix
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_11_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_11">
          <span class="md-nav__icon md-icon"></span>
          Appendix
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="lsbegin.html" class="md-nav__link">
        Inside AutoConnect::begin
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="credit.html" class="md-nav__link">
        Saved credentials access
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acupload.html" class="md-nav__link">
        File upload handler
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="colorized.html" class="md-nav__link">
        Custom colorized
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="changelabel.html" class="md-nav__link">
        Change label text
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="faq.html" class="md-nav__link">
        FAQ
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="changelog.html" class="md-nav__link">
        Change log
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="license.html" class="md-nav__link">
        License
      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#page-container-component" class="md-nav__link">
    Page, Container, Component
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#custom-web-page-handler-programming-model" class="md-nav__link">
    Custom Web page handler programming model
  </a>
  
    <nav class="md-nav" aria-label="Custom Web page handler programming model">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#parameters-for-the-customwebagehandler" class="md-nav__link">
     Parameters for the customWebageHandler
  </a>
  
    <nav class="md-nav" aria-label=" Parameters for the customWebageHandler">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#1-reference-to-the-autoconnectaux-instance" class="md-nav__link">
    1. Reference to the AutoConnectAux instance
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#2-reference-to-the-pageargument-instance" class="md-nav__link">
    2. Reference to the PageArgument instance
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#3-access-to-the-autoconnectelement-values" class="md-nav__link">
    3. Access to the AutoConnectElement values
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-customwebpagehandler-return-value" class="md-nav__link">
     The customWebpageHandler return value
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#handing-autoconnectelements-with-the-sketches" class="md-nav__link">
    Handing AutoConnectElements with the Sketches
  </a>
  
    <nav class="md-nav" aria-label="Handing AutoConnectElements with the Sketches">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#add-autoconnectelements-to-the-autoconnectaux-object" class="md-nav__link">
     Add AutoConnectElements to the AutoConnectAux object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#get-autoconnectelement-from-the-autoconnectaux" class="md-nav__link">
     Get AutoConnectElement from the AutoConnectAux
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#enable-autoconnectelements-during-the-sketch-execution" class="md-nav__link">
     Enable AutoConnectElements during the Sketch execution
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#loading-saving-autoconnectelements-with-json" class="md-nav__link">
    Loading &amp; saving AutoConnectElements with JSON
  </a>
  
    <nav class="md-nav" aria-label="Loading &amp; saving AutoConnectElements with JSON">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#loading-autoconnectaux-autoconnectelements-with-json" class="md-nav__link">
     Loading AutoConnectAux &amp; AutoConnectElements with JSON
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#saving-autoconnectelements-with-json" class="md-nav__link">
     Saving AutoConnectElements with JSON
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#custom-field-data-handling" class="md-nav__link">
    Custom field data handling
  </a>
  
    <nav class="md-nav" aria-label="Custom field data handling">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#where-to-pick-up-the-values" class="md-nav__link">
     Where to pick up the values
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#when-setting-the-initial-values" class="md-nav__link">
     When setting the initial values
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#how-you-can-reach-the-values" class="md-nav__link">
     How you can reach the values
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#get-autoconnectelement-values-from-the-transition-source" class="md-nav__link">
     Get AutoConnectElement values from the transition source
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#transfer-of-input-values-across-pages" class="md-nav__link">
     Transfer of input values across pages
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#retrieve-the-values-with-webserveron-handler" class="md-nav__link">
     Retrieve the values with WebServer::on handler
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#overwrite-the-autoconnectelements" class="md-nav__link">
     Overwrite the AutoConnectElements
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#check-data-against-on-submission" class="md-nav__link">
     Check data against on submission
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#input-data-validation" class="md-nav__link">
     Input data validation
  </a>
  
    <nav class="md-nav" aria-label=" Input data validation">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#common-declaration" class="md-nav__link">
    Common declaration
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-autoconnectinputisvalid" class="md-nav__link">
    Using AutoConnectInput::isValid
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-autoconnectauxisvalid" class="md-nav__link">
    Using AutoConnectAux::isValid
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#convert-data-to-actually-type" class="md-nav__link">
     Convert data to actually type
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#place-html-elements-undefined-in-autoconnectelements" class="md-nav__link">
    Place HTML elements undefined in AutoConnectElements
  </a>
  
    <nav class="md-nav" aria-label="Place HTML elements undefined in AutoConnectElements">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#place-a-markup-or-a-styled-html-tag" class="md-nav__link">
     Place a markup or a styled HTML tag
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#place-the-input-elements-within-a-form" class="md-nav__link">
     Place the input elements within a form
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-javascript" class="md-nav__link">
     Using JavaScript
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#custom-web-pages-communication-without-page-transitions" class="md-nav__link">
    Custom Web pages communication without page transitions
  </a>
  
    <nav class="md-nav" aria-label="Custom Web pages communication without page transitions">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#communicate-with-the-sketch-using-xhr" class="md-nav__link">
     Communicate with the Sketch using XHR
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#interact-with-sketches-by-autoconnectelements-event" class="md-nav__link">
     Interact with sketches by AutoConnectElements event
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#transitions-of-the-custom-web-pages" class="md-nav__link">
    Transitions of the custom Web pages
  </a>
  
    <nav class="md-nav" aria-label="Transitions of the custom Web pages">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#scope-lifetime-of-autoconnectaux" class="md-nav__link">
    Scope &amp; Lifetime of AutoConnectAux
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-uri-of-the-custom-web-pages" class="md-nav__link">
    The URI of the custom Web pages
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#an-http-response-from-the-custom-web-page-handler" class="md-nav__link">
    An HTTP response from the custom Web page handler
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#limitations" class="md-nav__link">
    Limitations
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



  <h1>Handling the custom Web pages</h1>

<h2 id="page-container-component">Page, Container, Component<a class="headerlink" href="#page-container-component" title="Permanent link">&para;</a></h2>
<p>AutoConnectAux is the container for a custom Web page, AutoConnectElement is the component of a page. AutoConnectElements must be contained in AutoConnectAux object. (ie. they are the elements displayed on the custom Web page.) Then AutoConnect makes an AutoConnectAux to a page.</p>
<p>AutoConnectElements declared in sketch must be programmed to add to AutoConnectAux one after another. Elements are automatically included in AutoConnectAux by AutoConnect if you load it from the JSON document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch.</p>
<h2 id="custom-web-page-handler-programming-model">Custom Web page handler programming model<a class="headerlink" href="#custom-web-page-handler-programming-model" title="Permanent link">&para;</a></h2>
<p>To handle Custom Web pages properly, the sketches need to implement to match the programming model. Custom Web page programming model is depicted as follows:</p>
<p><img src="images/aux_programing_model.svg"></p>
<p>Custom Web page handler acts as an event handler for processing the HTTP request captured by the WebServer class. The WebServer class parses the HTTP request and calls the registered uri handler appropriately. The custom web page uri (it should be specified by the <a href="acjson.html#uri">JSON description</a> for the custom web page, the <a href="apiaux.html#autoconnectaux">AutoConnectAux constructor</a>, or the <a href="achandling.html#when-setting-the-initial-values">AutoConnect::on</a> function) is not registered directly with the WebServer class, and the Requests always go through the request dispatcher inside AutoConnect.</p>
<p>When implementing the custom Web page handler, it is possible to give an appropriate function to the handler by understanding the above internal structure in advance. Custom web page handler can be sketched as regular function and has interface is as follows:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">String customWebpageHandler(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args)</span>
</code></pre></div>
<h3 id="parameters-for-the-customwebagehandler"><i class="fa fa-edit"></i> Parameters for the customWebageHandler<a class="headerlink" href="#parameters-for-the-customwebagehandler" title="Permanent link">&para;</a></h3>
<p>When the custom web page handler is called, AutoConnect passes the following two parameters:</p>
<h4 id="1-reference-to-the-autoconnectaux-instance">1. Reference to the AutoConnectAux instance<a class="headerlink" href="#1-reference-to-the-autoconnectaux-instance" title="Permanent link">&para;</a></h4>
<p>Custom Web page handlers can access the AutoConnectElements owned by its page through a reference to the <a href="apiaux.html#autoconnectaux">AutoConnectAux</a> instance. It can use this access to update the AutoConnectElements value before the user views the page or get the value of AutoConnectElements owned by the page that triggered the transition.</p>
<p>A list of commonly used functions to access AutoConnectElements with your Sketch via reference to an AutoConnectAux instance is following:</p>
<ul>
<li><code>[]</code> operator : Access to an AutoConnectElement by specified element name.</li>
<li><code>getElement</code> function : Access to an AutoConnectElement by specified element name.</li>
<li><code>as&lt;&gt;</code> function : Cast from a variant of <code>AutoConnectElement</code> type to an actual type such as <code>AutoConnectText</code> or <code>AutoConnectInput</code> etc. To access attributes that exist only in the actual type, it is necessary to convert from the <code>AutoConnectElement</code> type obtained with <code>[]</code> operator or <code>getElement</code> function.</li>
</ul>
<p>See the section <a href="achandling.html#get-autoconnectelement-from-the-autoconnectaux">Get AutoConnectElement from the AutoConnectAux</a> and the section <a href="apielements.html">AutoConnectElements API</a> for usage examples and API specifications for each above function.</p>
<h4 id="2-reference-to-the-pageargument-instance">2. Reference to the PageArgument instance<a class="headerlink" href="#2-reference-to-the-pageargument-instance" title="Permanent link">&para;</a></h4>
<p>The values of the <a href="acelements.html#autoconnectcheckbox">AutoConnectCheckbox</a>, <a href="acelements.html#autoconnectfile">AutoConnectFile</a>, <a href="acelements.html#autoconnectinput">AutoConnectInput</a>, <a href="acelements.html#autoconnectradio">AutoConnectRadio</a>, and <a href="acelements.html#autoconnectselect">AutoConnectSelect</a> elements are packed into the form data of the HTTP POST method by the page transition caused by <a href="acelements.html#autoconnectsubmit">AutoConnectSubmit</a>. Use the <a href="https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function">PageArgument</a> instance to retrieve the values of these transmitted AutoConnectElements with the customWebpageHandler. A list of commonly used functions to access PageArgment member variables with your Sketch via a reference to an PageArgument instance is following:</p>
<ul>
<li><code>arg</code> function : Get an element value by specified element name.</li>
<li><code>hasArg</code> function : Checks for the existence of an element with the specified name.</li>
</ul>
<p>The method to get the form data attached to the HTTP request via PageArgument is described with the section <a href="#how-you-can-reach-the-values">How you can reach the values</a>.</p>
<h4 id="3-access-to-the-autoconnectelement-values">3. Access to the AutoConnectElement values<a class="headerlink" href="#3-access-to-the-autoconnectelement-values" title="Permanent link">&para;</a></h4>
<p>Here, you have one thing to note. The custom web page handler registered with <a href="achandling.html#when-setting-the-initial-values">AutoConnect::on</a> function is called to respond to an HTTP request to the URL of its page. And, the AutoConnectAux instance then references the custom web page assigned to the requested URL. That is, the AutoConnectAux instance passed to the custom web page handler owns the AutoConnectElements for that page, while the PageArgument instance has the AutoConnectElements value of the custom web page that caused the page transition. You need to keep the difference between the two in mind when implementing the custom web page handler with your Sketch and access these values via the appropriate approach.</p>
<p>You can access the AutoConnect Elements of the custom web page itself via the <code>AutoConnectAux&amp;</code> argument by specifying the element name. You can also use the <code>PageArgument&amp;</code> argument to get the value of AutoConnectElements for the page that caused the transition to that custom web page. (the URL that issued the HTTP request)</p>
<p>The following screenshots are outputs of custom web pages that are based on a scenario to help you understand how to access AutoConnectElements properly with a custom web page handler. The requirements for this scenario are:</p>
<ul>
<li>Calculate an addition simply, add <code>B</code> to <code>A</code>.</li>
<li>Perform the calculation with a customWebPageHandler.</li>
<li>Returns the calculated result in another custom web page with page transitions.</li>
</ul>
<div style="display:inline-block">
  <img src="images/adder.png" width="300px"> <img src="images/arrow_right.png" style="width:35px;margin-left:10px;margin-right:10px;vertical-align:100px"> <img src="images/answer.png" width="300px">
</div>

<p>The first thing to work on is defining two custom web pages. Here, Value A and Value B are easily defined by applying <a href="acjson.html#acinput">AutoConnectInput</a>. Also, add an action button to perform the calculation with <a href="acjson.html#acsubmit">AutoConnectSubmit</a>.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;/add&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;title&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;Adder&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;menu&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;element&quot;</span><span style="color: #f8f8f2">: [</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;valueA&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;Value A&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;apply&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;number&quot;</span>
<span style="color: #f8f8f2">    },</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;valueB&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;Value B&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;apply&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;number&quot;</span>
<span style="color: #f8f8f2">    },</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;add&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACSubmit&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ADD&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;/results&quot;</span>
<span style="color: #f8f8f2">    }</span>
<span style="color: #f8f8f2">  ]</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>Next, define an additional page to display the results. Here we use <a href="acjson.html#actext">AutoConnectText</a> to display the calculation as a representation string of the expression. There is one thing to watch out for here. That is, the transition destination of the action button as <code>ADD</code> that accept the operand (it is specified by the <code>uri</code> of the ACSubmit element named "add") and the <code>uri</code> of the page that displays the answer are the same.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;/results&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;title&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;Adder&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;menu&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #66d9ef">false</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;element&quot;</span><span style="color: #f8f8f2">: [</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;results&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACText&quot;</span>
<span style="color: #f8f8f2">    }</span>
<span style="color: #f8f8f2">  ]</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>When implementing a custom web page handler, it's usually a good idea to pre-determine the page design (which consists of the elements and layouts you want to use) for a better outlook when coding your Sketch. Especially when coding a custom web page handler, you need to specify the AutoConnectElements exactly, and it is recommended to implement it along the JSON defined earlier.</p>
<p>After this, sketch the handlers for the above two custom web pages.</p>
<p>First, the handler for the page allocated to <code>/add</code>. The role of this handler is to initialize the values respectively for the <code>valueA</code> and <code>valueB</code> input boxes. Both of these two input boxes are on the <code>/add</code> page, so the handler only references the <code>AutoConnectAux&amp; aux</code> argument.</p>
<p>You can use the <code>[]</code> operator with the element name like as <code>aux["valueA"]</code> to get a reference to an AutoConnectElement by name. Then, once the reference is converted to AutoConnectInput, the <code>value</code> member of AutoConnectInput can be accessed. Use the <code>as&lt;AutoConnectInput&gt;()</code> function to convert from the AutoConnectElement type to the actual AutoConnectInput type.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">String </span><span style="color: #a6e22e">onAdd</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  aux[</span><span style="color: #e6db74">&quot;valueA&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">().value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;0&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">  aux[</span><span style="color: #e6db74">&quot;valueB&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">().value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;0&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>Next, the handler for the page allocated to <code>/results</code>. The role of this handler is to add the value B to A for the calculation. The <code>/results</code> page does not have an element that contains the operands Value A and Value B to calculate. Only the <code>/add</code> page has them. The <code>/results</code> page handler is called when ACSubmit on the <code>/add</code> page works, so <code>valueA</code> and <code>valueB</code> are included in the form data of the HTTP POST request to the <code>/results</code> page. That is, the handler for the <code>/results</code> page will get <code>valueA</code> and <code>valueB</code> from the <code>PageArgument&amp; args</code> argument.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">String </span><span style="color: #a6e22e">onResults</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">int</span><span style="color: #f8f8f2"> valueA </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> args.arg(</span><span style="color: #e6db74">&quot;valueA&quot;</span><span style="color: #f8f8f2">).toInt();</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">int</span><span style="color: #f8f8f2"> valueB </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> args.arg(</span><span style="color: #e6db74">&quot;valueB&quot;</span><span style="color: #f8f8f2">).toInt();</span>

<span style="color: #f8f8f2">  aux[</span><span style="color: #e6db74">&quot;results&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">().value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> String(valueA) </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot; + &quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> String(valueB) </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot; = &quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> String(valueA </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> valueB);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p><a href="https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function">PageArgument</a> is a built-in class in the <a href="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library. You can use the <a href="https://github.com/Hieromon/PageBuilder#string-pageargumentargstring-name">PageArgument::arg</a> function to retrieve the parameters of the form data contained in the POST request by name. Since the <code>PageArgument::arg</code> function returns the parameters of the POSTed form data as a string, it converts Value A and Value B to the operand integer value of the addition via the <code>String::toInt()</code> function.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">int</span><span style="color: #f8f8f2"> valueA </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> args.arg(</span><span style="color: #e6db74">&quot;valueA&quot;</span><span style="color: #f8f8f2">).toInt();</span>
<span style="color: #66d9ef">int</span><span style="color: #f8f8f2"> valueB </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> args.arg(</span><span style="color: #e6db74">&quot;valueB&quot;</span><span style="color: #f8f8f2">).toInt();</span>
</code></pre></div>
<p>In this scenario, in addition to the calculation result, the calculation formula is also displayed on the result page.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">aux[</span><span style="color: #e6db74">&quot;results&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">().value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> String(valueA) </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot; + &quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> String(valueB) </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot; = &quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> String(valueA </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> valueB);</span>
</code></pre></div>
<h3 id="the-customwebpagehandler-return-value"><i class="fa fa-edit"></i> The customWebpageHandler return value<a class="headerlink" href="#the-customwebpagehandler-return-value" title="Permanent link">&para;</a></h3>
<p>The customWebpageHandler returns a string. The returned string is used internally by AutoConnect to temporarily qualify the HTML generating of the custom web page. AutoConnect typically calls a custom web page handler before HTML generation.</p>
<p>When the customWebpageHandler returns an HTML string for qualification, it applies to the drawing area for the elements of AutoConnectElements. Additionally, you can then specify where the modifier HTML will be inserted. The <strong>second parameter</strong> of the <a href="apiaux.html#on">AutoConnectAux::on</a> function, which allows the registration of custom web page handlers, indicates where to insert the modifier HTML. </p>
<p>The Sketch can specify the following three values for the second parameter of AutoConnectAux::on function:</p>
<ul>
<li>
<p><strong>AC_EXIT_AHEAD</strong> : Modifiers HTML returned by the custom Web page handler is inserted into the front of the list expansion of AutoConnectElements.</p>
</li>
<li>
<p><strong>AC_EXIT_LATER</strong> : Modifiers HTML returned by the custom Web page handler is inserted into the back of the list expansion of AutoConnectElements.</p>
</li>
<li>
<p><strong>AC_EXIT_BOTH</strong> : The customWebpageHandle will be called twice before and after list expansion of AutoConnectElements.</p>
</li>
</ul>
<p>A detailed description of the <a href="apiaux.html#on">AutoConnectAux::on</a> function can be found in Section <a href="apiaux.html">AutoConnectAux API</a>.</p>
<hr />
<p>The actual sketch code implemented following these steps above would look like this (case of ESP8266):</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;Arduino.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnect.h&gt;</span>

<span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> PAGE_ADD[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/add&quot;,</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Adder&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: true,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;valueA&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74">      &quot;label&quot;: &quot;Value A&quot;,</span>
<span style="color: #e6db74">      &quot;apply&quot;: &quot;number&quot;</span>
<span style="color: #e6db74">    },</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;valueB&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74">      &quot;label&quot;: &quot;Value B&quot;,</span>
<span style="color: #e6db74">      &quot;apply&quot;: &quot;number&quot;</span>
<span style="color: #e6db74">    },</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;add&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74">      &quot;value&quot;: &quot;ADD&quot;,</span>
<span style="color: #e6db74">      &quot;uri&quot;: &quot;/results&quot;</span>
<span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> PAGE_RESULTS[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/results&quot;,</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Adder&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: false,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;results&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACText&quot;</span>
<span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">AutoConnect portal;</span>
<span style="color: #f8f8f2">AutoConnectAux  page_add;</span>
<span style="color: #f8f8f2">AutoConnectAux  page_results;</span>

<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">onAdd</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  aux[</span><span style="color: #e6db74">&quot;valueA&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">().value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;0&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">  aux[</span><span style="color: #e6db74">&quot;valueB&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">().value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;0&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">onResults</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">int</span><span style="color: #f8f8f2"> valueA </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> args.arg(</span><span style="color: #e6db74">&quot;valueA&quot;</span><span style="color: #f8f8f2">).toInt();</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">int</span><span style="color: #f8f8f2"> valueB </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> args.arg(</span><span style="color: #e6db74">&quot;valueB&quot;</span><span style="color: #f8f8f2">).toInt();</span>

<span style="color: #f8f8f2">  aux[</span><span style="color: #e6db74">&quot;results&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">().value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> String(valueA) </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot; + &quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> String(valueB) </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot; = &quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> String(valueA </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> valueB);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  page_add.load(PAGE_ADD);</span>
<span style="color: #f8f8f2">  page_results.load(PAGE_RESULTS);</span>
<span style="color: #f8f8f2">  portal.join({ page_add, page_results });</span>
<span style="color: #f8f8f2">  portal.on(</span><span style="color: #e6db74">&quot;/add&quot;</span><span style="color: #f8f8f2">, onAdd);</span>
<span style="color: #f8f8f2">  portal.on(</span><span style="color: #e6db74">&quot;/results&quot;</span><span style="color: #f8f8f2">, onResults);</span>
<span style="color: #f8f8f2">  portal.begin();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<h2 id="handing-autoconnectelements-with-the-sketches">Handing AutoConnectElements with the Sketches<a class="headerlink" href="#handing-autoconnectelements-with-the-sketches" title="Permanent link">&para;</a></h2>
<p>The AutoConnectAux class has several functions to manipulate AutoConnectElements. The functions can add, delete, retrieve elements, and get and set values.</p>
<h3 id="add-autoconnectelements-to-the-autoconnectaux-object"><i class="fa fa-edit"></i> Add AutoConnectElements to the AutoConnectAux object<a class="headerlink" href="#add-autoconnectelements-to-the-autoconnectaux-object" title="Permanent link">&para;</a></h3>
<p>To add AutoConnectElment(s) to an AutoConnectAux object, use the add function.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">add(AutoConnectElement</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> addon)</span>
</code></pre></div>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">add(AutoConnectElementVT addons)</span>
</code></pre></div>
<p>The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the <a href="https://en.cppreference.com/w/cpp/container/vector"><em>std::vector</em></a> of the <a href="https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper"><em>reference wrapper</em></a> to AutoConnectElements, and you can add these elements in bulk by using the <a href="https://en.cppreference.com/w/cpp/language/list_initialization"><em>list initialization</em></a> with the Sketch.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">typedef</span><span style="color: #f8f8f2"> std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">reference_wrapper</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">&gt;&gt;</span><span style="color: #f8f8f2"> AutoConnectElementVT;</span>
</code></pre></div>
<p>AutoConnectElements contained in AutoConnectAux object are uniquely identified by name. When adding an AutoConnectElement, if an element with the same name already exists in the AutoConnectAux, checking the type, and if it is the same, the value will be replaced. If another type of AutoConnectElement exists with the same name, that add operation will be invalid.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> In the following example, AutoConnectButton <code>button</code> addition will invalid because <code>hello</code> with the same name already exists as AutoConnectText.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectAux  aux;</span>
<span style="color: #f8f8f2">AutoConnectText text(</span><span style="color: #e6db74">&quot;hello&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;hello, world&quot;</span><span style="color: #f8f8f2">);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectButton button(</span><span style="color: #e6db74">&quot;hello&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;hello, world&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;alert(&#39;Hello world!&#39;)&quot;</span><span style="color: #f8f8f2">);  </span><span style="color: #75715e">// This is invalid.</span>
</span><span style="color: #f8f8f2">aux.add({ text, button });</span>
</code></pre></div>
<p>Similarly this, the uniqueness of the name is also necessary within the JSON document</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #e6db74">&quot;aux&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #e6db74">&quot;/aux&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;menu&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;element&quot;</span><span style="color: #f8f8f2"> : [</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;hello&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACText&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;hello, world&quot;</span>
<span style="color: #f8f8f2">    },</span>
<span style="color: #f8f8f2">    {</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;hello&quot;</span><span style="color: #f8f8f2">,</span>
</span><span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACButton&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;hello, world&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;action&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;alert(&#39;Hello world!&#39;)&quot;</span>
<span style="color: #f8f8f2">    }</span>
<span style="color: #f8f8f2">  ]</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<div class="admonition note">
<p class="admonition-title">Load all elements from JSON document</p>
<p>If you load all AutoConnectElements from JSON document into AutoConnect, you do not need to sketch the population process of the AutoConnectElements. It is managed by the AutoConnect library automatically.</p>
</div>
<h3 id="get-autoconnectelement-from-the-autoconnectaux"><i class="fa fa-edit"></i> Get AutoConnectElement from the AutoConnectAux<a class="headerlink" href="#get-autoconnectelement-from-the-autoconnectaux" title="Permanent link">&para;</a></h3>
<p>To retrieve an element from AutoConnectAux, use the getElement or getElements function. Normally, the getElement is needed when accessing the value of AutoConnectElement in the Sketch.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> name)</span>
</code></pre></div>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> __FlashStringHelper</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> name)</span>
</code></pre></div>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
</code></pre></div>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">T</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">T</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
</code></pre></div>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectElementVT</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElements(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</code></pre></div>
<p>The <a href="apiaux.html#getelement"><strong>getElement</strong></a> function returns an AutoConnectElement with the specified name as a key. When you use this function, you need to know the type of AutoConnectElement in advance and specify its type &lt;T> to an argument of the getElement. A type of &lt;T> can be specified as follows.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectButton</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectButton</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
<span style="color: #f8f8f2">AutoConnectCheckbox</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectCheckbox</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
<span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
<span style="color: #f8f8f2">AutoConnectFile</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectFile</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
<span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
<span style="color: #f8f8f2">AutoConnectRadio</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectRadio</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
<span style="color: #f8f8f2">AutoConnectSelect</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectSelect</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
<span style="color: #f8f8f2">AutoConnectSubmit</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectSubmit</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> name)</span>
</code></pre></div>
<p>To retrieve an AutoConnectElement by specifying its type, use the following method.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectAux  aux;</span>
<span style="color: #f8f8f2">aux.load(</span><span style="color: #e6db74">&quot;SOME_JSON_DOCUMENT&quot;</span><span style="color: #f8f8f2">);</span>

<span style="color: #75715e">// Retrieve the pointer of the AutoConnectText</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> text </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">reinterpret_cast</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">*&gt;</span><span style="color: #f8f8f2">(aux.getElement(</span><span style="color: #e6db74">&quot;TEXT_ELEMENT_NAME&quot;</span><span style="color: #f8f8f2">));</span>

<span style="color: #75715e">// Retrieve the reference of the AutoConnectText</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> text </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;TEXT_ELEMENT_NAME&quot;</span><span style="color: #f8f8f2">);</span>
</code></pre></div>
<p>The AutoConnectElement type behaves as a variant of other element types. Therefore use cast or template to convert to actual type as above. In the Sketch, you access the real type of AutoConnectElement after casting it and storing into the variable.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String auxJson </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> String(</span><span style="color: #e6db74">&quot;{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">Page 1 title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">uri</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">/page1</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">menu</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:true,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">element</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:[{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">name</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">caption</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">type</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">ACText</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">value</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">hello, world</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">}]}&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">AutoConnect portal;</span>
<span style="color: #f8f8f2">portal.load(auxJson);</span>
<span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> aux </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> portal.aux(</span><span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">);  </span><span style="color: #75715e">// Identify the AutoConnectAux instance with uri</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> text </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> aux</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;caption&quot;</span><span style="color: #f8f8f2">);  </span><span style="color: #75715e">// Cast to real type and access members</span>
<span style="color: #f8f8f2">Serial.println(text.value);</span>
</code></pre></div>
<p>You can also use the <a href="apiaux.html#operator">operator <strong><code>[]</code></strong> of AutoConnectAux</a> as another way to get the desired element. An operator <strong><code>[]</code></strong> is a shortcut for <a href="apiaux.html#getelement">getElement</a> function with the reference casting and makes simplify the Sketch code and treats like an array with the elements placed on a custom Web page. Its argument is the name of the element to be acquired similarly to getElement function. In the Sketch, by combining the <a href="apielements.html#ast62"><strong>AutoConnectElement::as&lt;T></strong></a> function with the operator <code>[]</code>, you can access the  AutoConnectElements reference according to its actual type. For example, the following sketch code returns the same as a reference of AutoConnectText element as the <code>caption</code>.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnect portal;</span>
<span style="color: #f8f8f2">portal.load(auxJson);</span>
<span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">  aux </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">*</span><span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> text1 </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;caption&quot;</span><span style="color: #f8f8f2">);</span>
</span><span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> text2 </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> aux[</span><span style="color: #e6db74">&quot;caption&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
</span></code></pre></div>
<div class="admonition note">
<p class="admonition-title">Need cast to convert to the actual type</p>
<p>An operator <code>[]</code> returns a reference of an AutoConnectElement. It is necessary to convert the type according to the actual element type with <a href="apielements.html#ast62">AutoConnectElement::as&lt;T></a> function.
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectButton</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectButton</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
<span style="color: #f8f8f2">AutoConnectCheckbox</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectCheckbox</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
<span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
<span style="color: #f8f8f2">AutoConnectFile</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectFile</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
<span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
<span style="color: #f8f8f2">AutoConnectRadio</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectRadio</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
<span style="color: #f8f8f2">AutoConnectSelect</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectSelect</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
<span style="color: #f8f8f2">AutoConnectSubmit</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectSubmit</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectElement</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">()</span>
</code></pre></div></p>
</div>
<p>To get all the AutoConnectElements in an AutoConnectAux object use the <a href="apiaux.html#getelements"><strong>getElements</strong></a> function. This function returns the vector of the reference wrapper as <strong>AutoConnectElementVT</strong> to all AutoConnectElements registered in the AutoConnectAux.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectElementVT</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElements(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</code></pre></div>
<h3 id="enable-autoconnectelements-during-the-sketch-execution"><i class="fa fa-edit"></i> Enable AutoConnectElements during the Sketch execution<a class="headerlink" href="#enable-autoconnectelements-during-the-sketch-execution" title="Permanent link">&para;</a></h3>
<p>AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page.  And conversely, it will not generate the HTML when the value is false.</p>
<p>For example, to enable the submit button only when the ESP module is connected to the access point in STA mode, you can sketch the following:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnect.h&gt;</span>

<span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> AUX[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> R(</span><span style="color: #e6db74">&quot;</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;aux&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;/aux&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> true,</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> [</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;input&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;label&quot;</span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;Input&quot;</span>
<span style="color: #f8f8f2">    },</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;send&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;ACSubmit&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;/send&quot;</span>
<span style="color: #f8f8f2">    }</span>
<span style="color: #f8f8f2">  ]</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #e6db74">&quot;);</span>

<span style="color: #f8f8f2">AutoConnect    portal;</span>
<span style="color: #f8f8f2">AutoConnectAux page;</span>

<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">onPage</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  AutoConnectSubmit</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> send </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> aux[</span><span style="color: #e6db74">&quot;send&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectSubmit</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  </span><span style="color: #66d9ef">if</span><span style="color: #f8f8f2"> (WiFi.isConnected())</span>
</span><span style="background-color: #49483e"><span style="color: #f8f8f2">    send.enable </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> (WiFi.getMode() </span><span style="color: #f92672">==</span><span style="color: #f8f8f2"> WIFI_STA);</span>
</span><span style="background-color: #49483e"><span style="color: #f8f8f2">  </span><span style="color: #66d9ef">else</span>
</span><span style="background-color: #49483e"><span style="color: #f8f8f2">    send.enable </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> false;</span>
</span><span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  page.load(AUX);</span>
<span style="color: #f8f8f2">  page.on(onPage);</span>
<span style="color: #f8f8f2">  portal.join(page);</span>
<span style="color: #f8f8f2">  portal.begin();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<div class="admonition hint">
<p class="admonition-title">Desirable to set or reset the enable attribute in the page handler</p>
<p>The enable attribute can be set at any time during the Sketch execution. The page handler with the <a href="apiaux.html#on">AC_EXIT_AHEAD</a> option is sure to handle it.</p>
</div>
<h2 id="loading-saving-autoconnectelements-with-json">Loading &amp; saving AutoConnectElements with JSON<a class="headerlink" href="#loading-saving-autoconnectelements-with-json" title="Permanent link">&para;</a></h2>
<p>AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectAux or AutoConnectElements. In both cases, the target object is a <a href="acjson.html">JSON document for AutoConnect</a>. However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux)</p>
<p><img src="images/ac_load_save.svg"></p>
<h3 id="loading-autoconnectaux-autoconnectelements-with-json"><i class="fa fa-upload"></i> Loading AutoConnectAux &amp; AutoConnectElements with JSON<a class="headerlink" href="#loading-autoconnectaux-autoconnectelements-with-json" title="Permanent link">&para;</a></h3>
<p>To load a JSON document as AutoConnectAux use the <a href="api.html#load"><strong>AutoConnect::load</strong></a> function and load the JSON document of each AutoConnectElement using the <a href="apiaux.html#loadelement"><strong>AutoConnectAux::loadElement</strong></a> function. Although the functions of both are similar, the structure of the target JSON document is different.</p>
<p>The <a href="apiaux.html#load">AutoConnect::load</a> function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. A single JSON document can contain multiple custom Web pages. If you write JSON of AutoConnectAux as an array, the load function generates all the pages contained in that array. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described section <a href="acjson.html#json-document-structure-for-autoconnectaux"><em>JSON document structure for AutoConnectAux</em></a>.</p>
<p>The <a href="apiaux.html#loadelement">AutoConnectAux::loadElement</a> function loads the elements individually into an AutoConnectAux object. The structure of its supplying JSON document is not AutoConnectAux. It must be a <a href="acjson.html#json-object-for-autoconnectelements">JSON structure for AutoConnectElement</a>, but you can specify an array.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">// AutoConnectAux as a custom Web page.</span>
<span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> page[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;raw(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Settings&quot;,</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/settings&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: true,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;server&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74">      &quot;label&quot;: &quot;Server&quot;</span>
<span style="color: #e6db74">    },</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;set&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74">      &quot;value&quot;: &quot;SET&quot;,</span>
<span style="color: #e6db74">      &quot;uri&quot; : &quot;/set&quot;</span>
<span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #75715e">// Additional AutoConnectElements.</span>
<span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> addons[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;raw(</span>
<span style="color: #e6db74">[</span>
<span style="color: #e6db74">  {</span>
<span style="color: #e6db74">    &quot;name&quot;: &quot;notes&quot;,</span>
<span style="color: #e6db74">    &quot;type&quot;: &quot;ACText&quot;,</span>
<span style="color: #e6db74">    &quot;value&quot;: &quot;An update period as the below optionally.&quot;</span>
<span style="color: #e6db74">  },</span>
<span style="color: #e6db74">  {</span>
<span style="color: #e6db74">    &quot;name&quot;: &quot;period&quot;,</span>
<span style="color: #e6db74">    &quot;type&quot;: &quot;ACRadio&quot;,</span>
<span style="color: #e6db74">    &quot;value&quot;: [</span>
<span style="color: #e6db74">      &quot;30 sec.&quot;,</span>
<span style="color: #e6db74">      &quot;60 sec.&quot;,</span>
<span style="color: #e6db74">      &quot;180 sec.&quot;</span>
<span style="color: #e6db74">    ],</span>
<span style="color: #e6db74">    &quot;arrange&quot;: &quot;vertical&quot;,</span>
<span style="color: #e6db74">    &quot;checked&quot;: 1</span>
<span style="color: #e6db74">  }</span>
<span style="color: #e6db74">]</span>
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">AutoConnect     portal;</span>
<span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> auxPage;</span>

<span style="color: #75715e">// Load a custom Web page.</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">portal.load(page);</span>
</span>
<span style="color: #75715e">// Get a &#39;/settings&#39; page</span>
<span style="color: #f8f8f2">auxPage </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> portal.aux(</span><span style="color: #e6db74">&quot;/settings&quot;</span><span style="color: #f8f8f2">);</span>

<span style="color: #75715e">// Also, load only AutoConnectRadio named the period.</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">loadElement(addons, </span><span style="color: #e6db74">&quot;period&quot;</span><span style="color: #f8f8f2">);</span>
</span>
<span style="color: #75715e">// Retrieve a server name from an AutoConnectText value.</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> serverName </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;server&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">Serial.println(serverName.value);</span>
</code></pre></div>
<h3 id="saving-autoconnectelements-with-json"><i class="fa fa-download"></i> Saving AutoConnectElements with JSON<a class="headerlink" href="#saving-autoconnectelements-with-json" title="Permanent link">&para;</a></h3>
<p>To save the AutoConnectAux or the AutoConnectElement as a JSON document, use the <a href="apiaux.html#saveelement">AutoConnectAux::saveElement</a> function. It serializes the contents of the object based on the type of the AutoConnectElement. You can persist a serialized AutoConnectElements as a JSON document to a stream.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">// Open a parameter file on the SPIFFS.</span>
<span style="color: #f8f8f2">SPIFFS.begin();</span>
<span style="color: #66d9ef">FILE</span><span style="color: #f8f8f2"> param </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> SPIFFS.open(</span><span style="color: #e6db74">&quot;/param&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;w&quot;</span><span style="color: #f8f8f2">);</span>

<span style="color: #75715e">// Save elements as the parameters.</span>
<span style="color: #f8f8f2">auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">saveElement(param, { </span><span style="color: #e6db74">&quot;server&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;period&quot;</span><span style="color: #f8f8f2"> });</span>

<span style="color: #75715e">// Close a parameter file.</span>
<span style="color: #f8f8f2">param.close();</span>
<span style="color: #f8f8f2">SPIFFS.end();</span>
</code></pre></div>
<p>The example above saves <code>server</code> and <code>period</code> elements from the AutoConnectAux object as mentioned above to the <code>/param</code> file on SPIFFS. Its JSON document of AutoConnectElements saved by its code looks like this:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">[</span>
<span style="color: #f8f8f2">  {</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;server&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;An inputted server name&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;Server&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;placeholder&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;&quot;</span>
<span style="color: #f8f8f2">  },</span>
<span style="color: #f8f8f2">  {</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;period&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACRadio&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: [</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;30 sec.&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;60 sec.&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #e6db74">&quot;180 sec.&quot;</span>
<span style="color: #f8f8f2">    ],</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;arrange&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;vertical&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">    </span><span style="color: #f92672">&quot;checked&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #ae81ff">2</span>
<span style="color: #f8f8f2">  }</span>
<span style="color: #f8f8f2">]</span>
</code></pre></div>
<p>Above JSON document can be loaded as it is into a custom Web page using the loadElement function. The loadElement function also loads the value of the element, so the saved value can be restored on the custom Web page.</p>
<h2 id="custom-field-data-handling">Custom field data handling<a class="headerlink" href="#custom-field-data-handling" title="Permanent link">&para;</a></h2>
<p>A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored in the member variable of each element by AutoConnect whenever GET/POST transmission occurs. </p>
<p>The following diagram shows the flow of the input values of a custom Web page into a sketch and is the basis for actions to manipulate the values of custom Web pages using sketches.</p>
<p><img src="images/ac_param_flow.svg"></p>
<h3 id="where-to-pick-up-the-values"><i class="fa fa-desktop"></i> Where to pick up the values<a class="headerlink" href="#where-to-pick-up-the-values" title="Permanent link">&para;</a></h3>
<p>A sketch composed of handlers can receive the value of AutoConnectElements entered in a custom Web page after sending, but that handler is different from the page where the value was entered. It is necessary to be aware that can accept the entered values by the next page handler after the transition.</p>
<p>Usually, two ways to retrieve entered values we have. One is to use the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments">ESP8266WebServer::arg</a> (or WebServer::arg for ESP32) function in the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#client-request-handlers"><code>on handler</code></a> attached by ESP8266WebServer (WebServer w/ESP32 also).</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnect.h&gt;</span>

<span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> addonJson[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;raw(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Hello&quot;,</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/hello&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: true,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;feels&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74">      &quot;label&quot;: &quot;What&#39;s up?&quot;</span>
<span style="color: #e6db74">    },</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;send&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74">      &quot;value&quot;: &quot;Just it!&quot;,</span>
<span style="color: #e6db74">      &quot;uri&quot;: &quot;/feels&quot;</span>
<span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">ESP8266WebServer webServer;</span>
<span style="color: #f8f8f2">AutoConnect </span><span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(webServer);</span>

<span style="color: #75715e">// Here, /feels handler</span>
<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">feelsOn</span><span style="color: #f8f8f2">() {</span>

<span style="color: #f8f8f2">  </span><span style="color: #75715e">// Retrieve the value of a input-box named &quot;feels&quot;</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  String feel </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> webServer.arg(</span><span style="color: #e6db74">&quot;feels&quot;</span><span style="color: #f8f8f2">);</span>
</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// Echo back the value</span>
<span style="color: #f8f8f2">  String echo </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;&lt;html&gt;&lt;p style=</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">color:blue;font-family:verdana;font-size:300%;</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">&gt;&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> feel </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> String(</span><span style="color: #e6db74">&quot; and a bold world!&lt;/p&gt;&lt;/html&gt;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  webServer.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">, echo);</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  webServer.on(</span><span style="color: #e6db74">&quot;/feels&quot;</span><span style="color: #f8f8f2">, feelsOn);  </span><span style="color: #75715e">// Register /feels handler</span>
<span style="color: #f8f8f2">  portal.load(addonJson);           </span><span style="color: #75715e">// Load a custom Web page</span>
<span style="color: #f8f8f2">  portal.begin();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>An above example is the most simple sketch of handling values entered into a custom Web page. This sketch obtains the string entered in the AutoConnectInput named <code>feels</code> with the <code>/feels</code> handler after page transition, and the AutoConnectInput is an <code>&lt;input type="text" name="feels"&gt;</code> element wrapped in the form as the actual HTML code. </p>
<div class="admonition info">
<p class="admonition-title">Should be accessed <code>/_ac</code> first</p>
<p>When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is <code>/_ac</code> concatenated with the local IP address of the esp8266 module.</p>
</div>
<p>Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the <a href="#get-autoconnectelement-from-the-autoconnectaux">getElement</a> function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnect.h&gt;</span>

<span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> addonJson[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;raw(</span>
<span style="color: #e6db74">[</span>
<span style="color: #e6db74">  {</span>
<span style="color: #e6db74">    &quot;title&quot;: &quot;Hello&quot;,</span>
<span style="color: #e6db74">    &quot;uri&quot;: &quot;/hello&quot;,</span>
<span style="color: #e6db74">    &quot;menu&quot;: true,</span>
<span style="color: #e6db74">    &quot;element&quot;: [</span>
<span style="color: #e6db74">      {</span>
<span style="color: #e6db74">        &quot;name&quot;: &quot;feels&quot;,</span>
<span style="color: #e6db74">        &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74">        &quot;label&quot;: &quot;What&#39;s up?&quot;</span>
<span style="color: #e6db74">      },</span>
<span style="color: #e6db74">      {</span>
<span style="color: #e6db74">        &quot;name&quot;: &quot;send&quot;,</span>
<span style="color: #e6db74">        &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74">        &quot;value&quot;: &quot;Just it!&quot;,</span>
<span style="color: #e6db74">        &quot;uri&quot;: &quot;/feels&quot;</span>
<span style="color: #e6db74">      }</span>
<span style="color: #e6db74">    ]</span>
<span style="color: #e6db74">  },</span>
<span style="color: #e6db74">  {</span>
<span style="color: #e6db74">    &quot;title&quot;: &quot;Hello&quot;,</span>
<span style="color: #e6db74">    &quot;uri&quot;: &quot;/feels&quot;,</span>
<span style="color: #e6db74">    &quot;menu&quot;: false,</span>
<span style="color: #e6db74">    &quot;element&quot;: [</span>
<span style="color: #e6db74">      {</span>
<span style="color: #e6db74">        &quot;name&quot;: &quot;echo&quot;,</span>
<span style="color: #e6db74">        &quot;type&quot;: &quot;ACText&quot;,</span>
<span style="color: #e6db74">        &quot;style&quot;: &quot;color:blue;font-family:verdana;font-size:300%;&quot;</span>
<span style="color: #e6db74">      }</span>
<span style="color: #e6db74">    ]</span>
<span style="color: #e6db74">  }</span>
<span style="color: #e6db74">]</span>
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">AutoConnect portal;</span>

<span style="color: #75715e">// Here, /feels handler</span>
<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">feelsOn</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>

<span style="color: #f8f8f2">  </span><span style="color: #75715e">// Get the AutoConnectInput named &quot;feels&quot;.</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// The where() function returns an uri string of the AutoConnectAux that triggered this handler.</span>
<span style="color: #f8f8f2">  AutoConnectAux</span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> hello </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> portal.aux(portal.where());</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  AutoConnectInput</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> feels </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> hello</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;feels&quot;</span><span style="color: #f8f8f2">);</span>
</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// Get the AutoConnectText named &quot;echo&quot;.</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">  echo </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;echo&quot;</span><span style="color: #f8f8f2">);</span>
</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// Echo back from input-box to /feels page.</span>
<span style="color: #f8f8f2">  echo.value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> feels.value </span><span style="color: #f92672">+</span><span style="color: #f8f8f2">  String(</span><span style="color: #e6db74">&quot; and a bold world!&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String(</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  portal.load(addonJson);                       </span><span style="color: #75715e">// Load custom Web pages</span>
<span style="color: #f8f8f2">  portal.on(</span><span style="color: #e6db74">&quot;/feels&quot;</span><span style="color: #f8f8f2">, feelsOn, AC_EXIT_AHEAD);  </span><span style="color: #75715e">// Register /feels handler</span>
<span style="color: #f8f8f2">  portal.begin();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>The above example handles in the handler for the values of a custom Web page. An <a href="api.html#on">AutoConnect::on</a> function registers a handler for the AutoConnectAux page of the specified uri. The argument of the custom Web page handler is an AutoConnectAux of the page itself and the <a href="https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function">PageArgument</a> object.</p>
<p>To retrieve the values entered in a custom Web page you need to access the AutoConnectElement of the page that caused the request to this page and to do this, you use the <a href="api.html#where">AutoConnect::where</a> function. The <code>AutoConnect::where</code> function returns an uri string of the AutoConnectAux object of the custom Web page that caused the HTTP request.</p>
<div class="admonition note">
<p class="admonition-title">The where() function is available for only AutoConnectAux.</p>
<p>The <code>AutoConnect::where</code> function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the <strong>on</strong> handler of ESP8266WebServer/WebServer for ESP32. In other words, the <code>AutoConnect::where</code> function only returns the last AutoConnecAux page called.</p>
</div>
<h3 id="when-setting-the-initial-values"><i class="fa fa-desktop"></i> When setting the initial values<a class="headerlink" href="#when-setting-the-initial-values" title="Permanent link">&para;</a></h3>
<p>An AutoConnectAux page is dynamically created by AutoConnect when its uri is requested. The initial value of AutoConnectElements can be set before its page request. It is also possible during <code>loop()</code>. To set the initial value when the page is accessed it needs by the handler of its page.</p>
<p>The <a href="api.html#on"><strong>AutoConnect::on</strong></a> and <a href="apiaux.html#on"><strong>AutoConnectAux::on</strong></a> functions register a handler for a custom Web page and also specify when to call that handler. The behavior of the two <code>on</code> functions is the same, only the class and arguments are different.</p>
<p><div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">bool</span><span style="color: #f8f8f2"> AutoConnect</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">on(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> String</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> uri, </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> AuxHandlerFunctionT handler, AutoConnectExitOrder_t order)</span>
</code></pre></div>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">on(</span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> AuxHandlerFunctionT handler, </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> AutoConnectExitOrder_t order)</span>
</code></pre></div></p>
<p>Parameter <code>uri</code> specifies an URI of the custom Web page, but an AutoConnectAux object with its URI must be registered with AutoConnect via the <a href="api.html#join">AutoConnect::join</a> function beforehand.</p>
<div class="admonition note">
<p class="admonition-title">AutoConnect::on/AutoConnectAux::on is not ESP8266WebServer::on</p>
<p>The <code>on</code> function for AutoConnect is different from the <code>on</code> function of Arduino core ESP8266WebServer (WebServer for ESP32). You can share the same handler via wrapper, but access to AutoConnectElements is <strong>valid only for handlers registered with <code>on</code> function for AutoConnect</strong>.</p>
</div>
<p><code>AuxHandlerFunctionT</code> type is a handler declaration using with <a href="https://en.cppreference.com/w/cpp/utility/functional/function">std::function</a>.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">String handler(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args)</span>
</code></pre></div>
<p>The handler of the custom Web page has two arguments by a reference of AutoConnectAux and a reference of PageArgument, it returns String. AutoConnect appends the string returned from the handler to the generated HTML. This allows you to add an HTML part before displaying the page.</p>
<dl>
<dt><code>AutoConnectExitOrder_t</code> specifies when the handler is called with the following enumeration value.</dt>
<dd>
<ul>
<li><strong>AC_EXIT_AHEAD</strong> : Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page.</li>
</ul>
</dd>
<dd>
<ul>
<li><strong>AC_EXIT_LATER</strong> : Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect.</li>
</ul>
</dd>
<dd>
<ul>
<li><strong>AC_EXIT_BOTH</strong> : Called even before generating HTML and after generated.</li>
</ul>
</dd>
</dl>
<p>The following example is a part of sketch contained the handlers. </p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">// AutoConnect object declarations</span>
<span style="color: #f8f8f2">ACInput(input1);</span>
<span style="color: #f8f8f2">AutoConnectAux aux(</span><span style="color: #e6db74">&quot;/aux&quot;</span><span style="color: #f8f8f2">, { input1 });</span>
<span style="color: #f8f8f2">AutoConnect portal;</span>
<span style="color: #75715e">// Pre-declare handlers</span>
<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">initialize</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">append</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">);</span>

<span style="color: #75715e">// Register handlers and launch the portal.</span>
<span style="color: #f8f8f2">aux.on(initialize, AC_AHEAD);</span>
<span style="color: #f8f8f2">aux.on(append, AC_LATER);</span>
<span style="color: #f8f8f2">portal.join(aux);</span>
<span style="color: #f8f8f2">portal.begin();</span>

<span style="color: #75715e">// Some code here...</span>

<span style="color: #75715e">// The handler called before HTML generating</span>
<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">initialize</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  AutoConnectInput</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> input1 </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// Set initial value for the input box in a custom Web page.</span>
<span style="color: #f8f8f2">  input1.value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;Initial value&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// Nothing appendix for a generated HTML.</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #75715e">// The handler called after HTML generated</span>
<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">append</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// Append an HTML</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String(</span><span style="color: #e6db74">&quot;&lt;p&gt;This text has been added.&lt;/p&gt;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<h3 id="how-you-can-reach-the-values"><i class="fa fa-wrench"></i> How you can reach the values<a class="headerlink" href="#how-you-can-reach-the-values" title="Permanent link">&para;</a></h3>
<p>AutoConnectSubmit uses the POST method to send HTTP requests. A value of AutoConnectInput sent to the ESP8266 or ESP32 with POST is stored in the request body of the HTTP request:
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">POST</span> <span style="color: #f8f8f2">/feels</span> <span style="color: #f8f8f2">HTTP/1.1</span>
<span style="color: #f8f8f2">Host:</span> <span style="color: #f8f8f2">ESP8266_IP_ADDRESS</span>
<span style="color: #f8f8f2">name1=value1&amp;name2=value2&amp;name3=value3</span>
</code></pre></div>
ESP8266WebServer class will parse the query string and rebuilds its arguments when the above request arrives. A custom page handler registered with the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#client-request-handlers">ESP8266WebServer::on</a> function can access the value of AutoConnectElements with <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments">ESP8266WebServe::arg</a> function. It reaches the values of AutoConnectElements without the intermediation of AutoConnect. Therefore, its handler will not be AutoConnectAux and can send a response to the client directly. The following example is part of a server sketch which has two web pages. The <code>/hello</code> page is a custom Web page of AutoConnectAux which has an input box named "input1". Another <code>/echo</code> page is a page handler for ESP8266WebServer, which uses the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#sending-responses-to-the-client">ESP8266WebServer::send</a> function to echo back the value of an input1 as an http response.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">ESP8266WebServer server;</span>
<span style="color: #f8f8f2">AutoConnect      </span><span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">ACInput(input1, </span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;INPUT&quot;</span><span style="color: #f8f8f2">);</span>
</span><span style="color: #f8f8f2">ACSubmit(send, </span><span style="color: #e6db74">&quot;HELLO&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;/echo&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">AutoConnectAux  aux(</span><span style="color: #e6db74">&quot;/hello&quot;</span><span style="color: #f8f8f2">, { input1, send });</span>

<span style="color: #f8f8f2">server.on(</span><span style="color: #e6db74">&quot;/echo&quot;</span><span style="color: #f8f8f2">, []() {</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  String echo </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> server.arg(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span>
</span><span style="color: #f8f8f2">  Serial.println(echo);</span>
<span style="color: #f8f8f2">  server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;text/plain&quot;</span><span style="color: #f8f8f2">, echo);</span>
<span style="color: #f8f8f2">});</span>

<span style="color: #f8f8f2">portal.join(aux);</span>
<span style="color: #f8f8f2">portal.begin();</span>
</code></pre></div>
<p>Also, you can choose another way to access arguments without going through the ESP8266WebServer class. The <a href="https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function">PageArgument</a> object of the custom Web page handler argument is a copy of the arg object of the ESP8266WebServer class. Either of these methods is a simple and easy way to access parameters in custom Web page handlers. However, if you need to access from outside of the handler to the value of AutoConnectElements, you need to accomplish it using with the <a href="#get-autoconnectelement-from-the-autoconnectaux">AutoConnectAux::getElement</a> function. The following sketch code replaces the above example with JSON and PageArgument, and its behaves is equivalent basically to the above sketch.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> auxPage[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;raw(</span>
<span style="color: #e6db74">[</span>
<span style="color: #e6db74">  { &quot;title&quot;:&quot;Hello&quot;, &quot;uri&quot;:&quot;/hello&quot;, &quot;menu&quot;:true, &quot;element&quot;:[</span>
<span style="color: #e6db74">    { &quot;name&quot;:&quot;input1&quot;, &quot;type&quot;: &quot;ACInput&quot;, &quot;label&quot;: &quot;INPUT&quot; },</span>
<span style="color: #e6db74">    { &quot;name&quot;:&quot;send&quot;, &quot;type&quot;:&quot;ACSubmit&quot;, &quot;value&quot;:&quot;HELLO&quot;, &quot;uri&quot;:&quot;/echo&quot; }]</span>
<span style="color: #e6db74">  },</span>
<span style="color: #e6db74">  { &quot;title&quot;:&quot;Echo&quot;, &quot;uri&quot;:&quot;/echo&quot;, &quot;menu&quot;:false, &quot;element&quot;:[</span>
<span style="color: #e6db74">    { &quot;name&quot;:&quot;echo&quot;, &quot;type&quot;:&quot;ACText&quot; }]</span>
<span style="color: #e6db74">  }</span>
<span style="color: #e6db74">]</span>
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">AutoConnect portal;</span>

<span style="color: #f8f8f2">portal.load(auxPage);</span>
<span style="color: #f8f8f2">portal.on(</span><span style="color: #e6db74">&quot;/echo&quot;</span><span style="color: #f8f8f2">, [](AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  AutoConnectText</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> ac_echo </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;echo&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  ac_echo.value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> args.arg(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();  </span>
<span style="color: #f8f8f2">});</span>

<span style="color: #f8f8f2">portal.begin();</span>
</code></pre></div>
<h3 id="get-autoconnectelement-values-from-the-transition-source"><i class="fa fa-wrench"></i> Get AutoConnectElement values from the transition source<a class="headerlink" href="#get-autoconnectelement-values-from-the-transition-source" title="Permanent link">&para;</a></h3>
<p>Usually, the page transition called by the custom web page handler will have an HTTP request directed to the destination URL. Its HTTP request has parameters enclosed by the POST method, all of which are AutoConnectElements placed on the transition source page. On the other hand, the custom web page handler's first argument points to AutoConnectAux after the transition, so the handler cannot access the AutoConnectElement values placed at the transition source using the first argument.</p>
<p>Custom Web paga handler has two ways to access AutoConnectElements placed on the transition source page: combining the <a href="api.html#where">AutoConnect::where</a> and <a href="api.html#aux">AutoConnect::aux</a> functions or using the <a href="apiaux.html#referer">AutoConnectAux::referer</a> function. The following code snippet shows the difference between the two methods of identifying the <code>input1</code> AutoConnectInput with the <code>/echo</code> page handler after the transition based on the <code>/hello</code> page described above.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">portal.on(</span><span style="color: #e6db74">&quot;/echo&quot;</span><span style="color: #f8f8f2">, [](AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">   ac_hello </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">*</span><span style="color: #f8f8f2">portal.aux(portal.where());</span>
</span><span style="color: #f8f8f2">  AutoConnectInput</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> ac_input1 </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> ac_hello[</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
<span style="color: #f8f8f2">  Serial.println(ac_input1.value);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();  </span>
<span style="color: #f8f8f2">});</span>
</code></pre></div>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">portal.on(</span><span style="color: #e6db74">&quot;/echo&quot;</span><span style="color: #f8f8f2">, [](AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">   ac_hello </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> portal.referer();</span>
</span><span style="color: #f8f8f2">  AutoConnectInput</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> ac_input1 </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> ac_hello[</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
<span style="color: #f8f8f2">  Serial.println(ac_input1.value);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();  </span>
<span style="color: #f8f8f2">});</span>
</code></pre></div>
<h3 id="transfer-of-input-values-across-pages"><i class="fa fa-wrench"></i> Transfer of input values across pages<a class="headerlink" href="#transfer-of-input-values-across-pages" title="Permanent link">&para;</a></h3>
<p>Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as <a href="apielements.html#global_2">global</a> to the same-named global elements on a different custom Web pages at the page transition timing.</p>
<p><img src="images/global.svg"> </p>
<p>The <strong>global</strong> attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> PAGE1[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;PAGE1&quot;,</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/page1&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: true,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="background-color: #49483e"><span style="color: #e6db74">      &quot;name&quot;: &quot;input1&quot;,</span>
</span><span style="color: #e6db74">      &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="background-color: #49483e"><span style="color: #e6db74">      &quot;global&quot;: true</span>
</span><span style="color: #e6db74">    },</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;send&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74">      &quot;value&quot;: &quot;OK&quot;,</span>
<span style="color: #e6db74">      &quot;uri&quot;: &quot;/page2&quot;</span>
<span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> PAGE2[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;PAGE2&quot;,</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/page2&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: false,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="background-color: #49483e"><span style="color: #e6db74">      &quot;name&quot;: &quot;input1&quot;,</span>
</span><span style="color: #e6db74">      &quot;type&quot;: &quot;ACText&quot;,</span>
<span style="background-color: #49483e"><span style="color: #e6db74">      &quot;global&quot;: true</span>
</span><span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">AutoConnect portal;</span>
<span style="color: #f8f8f2">AutoConnectAux page1;</span>
<span style="color: #f8f8f2">AutoConnectAux page2;</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  page1.load(PAGE1);</span>
<span style="color: #f8f8f2">  page2.load(PAGE2);</span>
<span style="color: #f8f8f2">  portal.join( { page1, page2 });</span>
<span style="color: #f8f8f2">  portal.begin();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p><i class="fa fa-arrow-down"></i><br><i class="fa fa-eye"></i> The value entered in <strong>input1 declared in PAGE1</strong> is reflected in <strong>input1 of PAGE2</strong> as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like:<br>
<span style="width:300px;height:159px"><img align="top" width="300" height="159" src="images/global1.png"></span>
<span style="margin-left:7px;"><img width="20" src="images/arrow_right.png"></span>
<span style="margin-left:7px;width:300px;height:159px"><img width="300" height="159" src="images/global2.png"></span></p>
<div class="admonition note">
<p class="admonition-title">Copy only for same-named and the global</p>
<p>The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied.</p>
</div>
<h3 id="retrieve-the-values-with-webserveron-handler"><i class="fa fa-wrench"></i> Retrieve the values with WebServer::on handler<a class="headerlink" href="#retrieve-the-values-with-webserveron-handler" title="Permanent link">&para;</a></h3>
<p>ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function.</p>
<p>When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the <a href="acelements.html#uri">uri</a> attribute of <a href="acelements.html#autoconnectsubmit">AutoConnectSubmit</a>) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the Sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the <a href="apiaux.html#fetchelement">AutoConnectAux::fetchElement</a> function for value processing with the on-page handler.</p>
<p>The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">ESP8266WebServer server;</span>
<span style="color: #f8f8f2">AutoConnect </span><span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span>
<span style="color: #f8f8f2">AutoConnectAux Input;</span>

<span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> InputPage[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;r(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Input&quot;, &quot;uri&quot;: &quot;/input&quot;, &quot;menu&quot;: true, &quot;element&quot;: [</span>
<span style="color: #e6db74">    { &quot;name&quot;: &quot;input&quot;, &quot;type&quot;: &quot;ACInput&quot;, &quot;label&quot;: &quot;INPUT&quot; },</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;save&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74">      &quot;value&quot;: &quot;SAVE&quot;,</span>
<span style="background-color: #49483e"><span style="color: #e6db74">      &quot;uri&quot;: &quot;/&quot;</span>
</span><span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)r&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #75715e">// An on-page handler for &#39;/&#39; access</span>
<span style="background-color: #49483e"><span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">onRoot</span><span style="color: #f8f8f2">() {</span>
</span><span style="color: #f8f8f2">  String  content </span><span style="color: #f92672">=</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;&lt;html&gt;&quot;</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;&lt;head&gt;&lt;meta name=&#39;viewport&#39; content=&#39;width=device-width, initial-scale=1&#39;&gt;&lt;/head&gt;&quot;</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;&lt;body&gt;&lt;div&gt;INPUT: {{value}}&lt;/div&gt;&lt;/body&gt;&quot;</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;&lt;/html&gt;&quot;</span><span style="color: #f8f8f2">;</span>

<span style="background-color: #49483e"><span style="color: #f8f8f2">  Input.fetchElement();    </span><span style="color: #75715e">// Preliminary acquisition</span>
</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// For this steps to work, need to call fetchElement function beforehand.</span>
<span style="color: #f8f8f2">  String value </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> Input[</span><span style="color: #e6db74">&quot;input&quot;</span><span style="color: #f8f8f2">].value;</span>
<span style="color: #f8f8f2">  content.replace(</span><span style="color: #e6db74">&quot;{{value}}&quot;</span><span style="color: #f8f8f2">, value);</span>
<span style="color: #f8f8f2">  server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">, content);</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  Input.load(InputPage);</span>
<span style="color: #f8f8f2">  portal.join(Input);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  server.on(</span><span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">, onRoot);  </span><span style="color: #75715e">// Register the on-page handler</span>
</span><span style="color: #f8f8f2">  portal.begin();  </span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<h3 id="overwrite-the-autoconnectelements"><i class="fa fa-edit"></i> Overwrite the AutoConnectElements<a class="headerlink" href="#overwrite-the-autoconnectelements" title="Permanent link">&para;</a></h3>
<p>Sketches can update the attributes of AutoConnectElements with two approaches. A one is to assign directly to the attributes of a member variable of its element. The other is to overwrite them with loading the element by <a href="apiaux.html#loadelement">AutoConnectAux::loadElement</a>. </p>
<p>The elements for attributes described in the JSON document for AutoConnectElements overwrites the member variables of the target AutoConnectElements. However, AutoConnectAux::loadElement keeps the member variables unchanged if there is no element in the JSON document. This overwriting behavior is the same for the <a href="api.html#load">AutoConnect::load</a> function.</p>
<p>For example, the combination of the Sketch and JSON document as follows updates only the style while keeping Caption (ie. "Hello, world") as AutoConnectText value.</p>
<p><i class="fab fa-js-square"></i> External JSON document for the below sketch to modify the text style.
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #e6db74">&quot;Caption&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #e6db74">&quot;ACText&quot;</span><span style="color: #f8f8f2">,</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;style&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;text-align:center;font-size:24px;font-family:&#39;Impact&#39;,&#39;Futura&#39;,sans-serif;color:tomato;&quot;</span>
</span><span style="color: #f8f8f2">}</span>
</code></pre></div></p>
<p><i class="fa fa-arrow-down"></i><br>
<i class="fa fa-code"></i> the Sketch (a part of code), load above JSON.
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="background-color: #49483e"><span style="color: #f8f8f2">ACText(Caption, </span><span style="color: #e6db74">&quot;Hello, world&quot;</span><span style="color: #f8f8f2">);</span>
</span><span style="color: #f8f8f2">AutoConnectAux helloPage(</span><span style="color: #e6db74">&quot;/hello&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;Hello&quot;</span><span style="color: #f8f8f2">, true, { Caption });</span>
<span style="color: #f8f8f2">AutoConnect portal;</span>

<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">onHello</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  aux.loadElement(JSON);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  helloPage.on(onHello);</span>
<span style="color: #f8f8f2">  portal.join(helloPage);</span>
<span style="color: #f8f8f2">  portal.begin();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<i class="fa fa-arrow-down"></i><br>
<i class="fa fa-eye"></i> It's shown as like:<span style="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><img align="top" width="270" height="116" src="images/acow.png"></span></p>
<h3 id="check-data-against-on-submission"><i class="far fa-check-square"></i> Check data against on submission<a class="headerlink" href="#check-data-against-on-submission" title="Permanent link">&para;</a></h3>
<p>By giving a <a href="apielements.html#pattern">pattern</a> to <a href="apielements.html#autoconnectinput">AutoConnectInput</a>, you can find errors in data styles while typing in custom Web pages. The pattern is specified with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a>.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup> If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;title&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #e6db74">&quot;Page-1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;menu&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;element&quot;</span><span style="color: #f8f8f2"> : [</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #e6db74">&quot;Server&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2"> : </span><span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;Server address&quot;</span><span style="color: #f8f8f2">,</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;pattern&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$&quot;</span>
</span><span style="color: #f8f8f2">    }</span>
<span style="color: #f8f8f2">  ]</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p><i class="fa fa-arrow-down"></i><br><i class="fa fa-eye"></i> It's shown as like:<br>
<span style="display:block;width:306px;height:136px;border:1px solid lightgrey;"><img data-gifffer="images/aux_pattern.gif" data-gifffer-height="134" data-gifffer-width="304" /></span></p>
<p>If you are not familiar with regular expressions, you may feel that description very strange. Matter of fact, it's a strange description for those who are unfamiliar with the formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The <a href="https://regex101.com/">regex101</a> is an exceptional online tool for testing and debugging regular expressions.</p>
<h3 id="input-data-validation"><img src="images/regexp.png" align="top"> Input data validation<a class="headerlink" href="#input-data-validation" title="Permanent link">&para;</a></h3>
<p>The <a href="apielements.html#pattern">pattern</a> attribute of <a href="apielements.html#autoconnectinput">AutoConnectInput</a> only determines the data consistency on the web browser based on the given regular expression. In order to guarantee the validity of input data, it is necessary to verify it before actually using it.</p>
<p>You can validate input data from <a href="apielements.html#autoconnectinput">AutoConnectInput</a> using the <a href="apielements.html#isvalid">isValid</a> function before actually processing it.  The <a href="apielements.html#isvalid">isValid</a> function determines whether the <a href="apielements.html#value_3">value</a> currently stored in <a href="apielements.html#autoconnectinput">AutoConnectInput</a> matches the <a href="apielements.html#pattern">pattern</a>.</p>
<p>You can also use the <a href="apiaux.html#isvalid">AutoConnectAux::isValid</a> function to verify the data input to all <a href="apielements.html#autoconnectinput">AutoConnectInput</a> elements on the custom Web page at once. The two sketches below show the difference between using <a href="apielements.html#isvalid">AutoConnectInput::isValid</a> and using <a href="apiaux.html#isvalid">AutoConnectAux::isValid</a>. In both cases, it verifies the input data of the same AutoConnectInput, but in the case of using AutoConnectAux::isValid, the amount of sketch coding is small.</p>
<h4 id="common-declaration">Common declaration<a class="headerlink" href="#common-declaration" title="Permanent link">&para;</a></h4>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> PAGE[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Custom page&quot;,</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/page&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: true,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;input1&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74">      &quot;pattern&quot;: &quot;^[0-9]{4}$&quot;</span>
<span style="color: #e6db74">    },</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;input2&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74">      &quot;pattern&quot;: &quot;^[a-zA-Z]{4}$&quot;</span>
<span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">AutoConnectAux page;</span>
<span style="color: #f8f8f2">page.load(PAGE);</span>
</code></pre></div>
<h4 id="using-autoconnectinputisvalid">Using AutoConnectInput::isValid<a class="headerlink" href="#using-autoconnectinputisvalid" title="Permanent link">&para;</a></h4>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> input1 </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> page[</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
<span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> input2 </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> page[</span><span style="color: #e6db74">&quot;input2&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
<span style="color: #66d9ef">if</span><span style="color: #f8f8f2"> (</span><span style="color: #f92672">!</span><span style="color: #f8f8f2">input1.isValid() </span><span style="color: #f92672">||</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">!</span><span style="color: #f8f8f2">input2.isValid())</span>
<span style="color: #f8f8f2">  Serial.println(</span><span style="color: #e6db74">&quot;Validation error&quot;</span><span style="color: #f8f8f2">);</span>
</code></pre></div>
<h4 id="using-autoconnectauxisvalid">Using AutoConnectAux::isValid<a class="headerlink" href="#using-autoconnectauxisvalid" title="Permanent link">&para;</a></h4>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">if</span><span style="color: #f8f8f2"> (</span><span style="color: #f92672">!</span><span style="color: #f8f8f2">page.isValid())</span>
<span style="color: #f8f8f2">  Serial.println(</span><span style="color: #e6db74">&quot;Validation error&quot;</span><span style="color: #f8f8f2">);</span>
</code></pre></div>
<h3 id="convert-data-to-actually-type"><i class="fas fa-magic"></i> Convert data to actually type<a class="headerlink" href="#convert-data-to-actually-type" title="Permanent link">&para;</a></h3>
<p>The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. For the typical data type conversion method, refer to section <a href="datatips.html#convert-autoconnectelements-value-to-actual-data-type"><em>Tips for data conversion</em></a>.</p>
<h2 id="place-html-elements-undefined-in-autoconnectelements">Place HTML elements undefined in AutoConnectElements<a class="headerlink" href="#place-html-elements-undefined-in-autoconnectelements" title="Permanent link">&para;</a></h2>
<p>Of the many HTML elements for markup, AutoConnet can only support a limited number. If you are designing a custom web page and the elements you want are not in AutoConnectElements, consider using an AutoConnectElement. <a href="acelements.html#autoconnectelement-a-basic-class-of-elements">AutoConnectElement</a> can be applied in many cases when trying to place HTML tag elements that are undefined in AutoConnectElemets on custom web pages.</p>
<div class="admonition warning">
<p class="admonition-title">Not all of them work</p>
<p>The strongest constraint is the heap size required to generate HTML for the entire custom Web page. AutoConnect creates a custom web page as a chunk of String. It's not a stream. Therefore, it may not be possible to generate long HTML pages. See also <a href="faq.html#some-autoconnect-page-is-cut-off">FAQ</a>.</p>
</div>
<h3 id="place-a-markup-or-a-styled-html-tag"><i class="far fa-file-code"></i> Place a markup or a styled HTML tag<a class="headerlink" href="#place-a-markup-or-a-styled-html-tag" title="Permanent link">&para;</a></h3>
<p>If the HTML element you want to place is just the tag that makes up the appearance of the web page, assign the tag element directly to the <a href="apielements.html#value_2">value</a> member of AutoConnectElement. If the tag you are trying to place is for static markup effects, just write the <code>value</code> as follows:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;headline&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACElement&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;&lt;hr style=&#39;height:1px;border-width:0;color:gray;background-color:#52a6ed&#39;&gt;&quot;</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>If the element has a hierarchy like a <code>&lt;table&gt; ~ &lt;/table&gt;</code>, describe the entire element in the <code>value</code>:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;table&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACElement&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;&lt;table&gt;&lt;tr&gt;&lt;th&gt;Board&lt;/th&gt;&lt;th&gt;Platform&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;NodeMCU&lt;/td&gt;&lt;td&gt;Espressif8266&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;ESP32-DevKitC&lt;/td&gt;&lt;td&gt;Espressif32&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>Also, using <a href="acelements.html#autoconnectstyle">AutoConnectStyle</a> combined, you can give the style effect of only that element.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;tablestyle&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACStyle&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;table.style{font-family:arial,sans-serif;border-collapse:collapse;width:100%;color:black;}table.style td,table.style th{border:1px solid #dddddd;text-align:center;padding:8px;}table.style tr:nth-child(even){background-color:#dddddd;}&quot;</span>
<span style="color: #f8f8f2">},</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;table&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACElement&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;&lt;table class=&#39;style&#39;&gt;&lt;tr&gt;&lt;th&gt;Board&lt;/th&gt;&lt;th&gt;Platform&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;NodeMCU&lt;/td&gt;&lt;td&gt;Espressif8266&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;ESP32-DevKitC&lt;/td&gt;&lt;td&gt;Espressif32&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p><i class="fa fa-arrow-down"></i><br>
<i class="fa fa-eye"></i> As you see it:
<br />
<table class="achandling">
  <tr>
    <th>Board</th>
    <th>Platform</th>
  </tr>
  <tr>
    <td>NodeMCU</td>
    <td>Espressif8266</td>
  </tr>
  <tr>
    <td>ESP32-DevKitC</td>
    <td>Espressif32</td>
  </tr>
</table>
</p>
<h3 id="place-the-input-elements-within-a-form"><i class="far fa-file-code"></i> Place the input elements within a form<a class="headerlink" href="#place-the-input-elements-within-a-form" title="Permanent link">&para;</a></h3>
<p>There is still no dedicated AutoConnectElement for entering other than equivalent to <code>checkbox</code>, <code>file</code>, <code>number</code>, <code>password</code>, <code>radio</code> and <code>text</code> for <code>&lt;input type="..."&gt;</code> HTML element. But you can substitute them with the AutoConnectElement.</p>
<p>For example, if you use the <code>&lt;input&gt;</code> element of <code>type="date"</code> to place a field where you can enter a date, the AutoConnectElement would look like this:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;date&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACElement&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;&lt;label for=&#39;picker&#39;&gt;Date:&lt;/label&gt;&lt;input type=&#39;date&#39; id=&#39;picker&#39; name=&#39;date&#39;&gt;&quot;</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>And it becomes a textbox that validates the input or a special date picker interface.<br />
Then, instead of accessing that AutoConnectElement directly, obtains entered date value from the POST body included in the HTTP request from the hosted ESP8266WebServer class. Its process carries out with the <a href="achandling.html#how-you-can-reach-the-values">AutoConnectAux page handler</a> following:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">String </span><span style="color: #a6e22e">aux_page_handler</span><span style="color: #f8f8f2">(AutoConnectAux </span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">aux, PageArgument </span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">arg) {</span>
<span style="color: #f8f8f2">  Serial.println(arg.arg(</span><span style="color: #e6db74">&quot;date&quot;</span><span style="color: #f8f8f2">));  </span><span style="color: #75715e">// Obtain a date value entered</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>AutoConnect passes a <a href="https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function">PageArgument</a> to the AutoConnectAux page handler. The handler can use the <a href="https://github.com/Hieromon/PageBuilder#string-pageargumentargstring-name">PageArgument::arg</a> function to get the parameters contained in the HTTP request for the page. 
Also, the equivalent can also be implemented using <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments">ESP8266WebServer::arg</a> function with the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#client-request-handlers">ESP8266WebServer client request handler</a>.</p>
<h3 id="using-javascript"><i class="fab fa-js-square"></i> Using JavaScript<a class="headerlink" href="#using-javascript" title="Permanent link">&para;</a></h3>
<p>What is described in this section belongs to the tips of what effectiveness a web page can have using AutoConnectElement, rather than the correct usage for AutoConnect.<br />
You can use AutoConnectElement to embed JavaScript into the custom Web page as with HTML elements for markup. The reason for embedding JavaScript on a page depends on your requirements, but One of the most common requirements is the need to access elements of a web page. You can implement the requirements by having the AutoConnectElement have JavaScript that contains DOM access.</p>
<p>The following screenshot shows an example of accessing AutoConnectText via the DOM using an AutoConnectElement with JavaScript. This web page is a very simple example and returns the result of multiplying the multiplier entered in an AutoConnectInput field.</p>
<p><img src="images/jsmultiply.png"></p>
<p>This custom Web page is generated from the following JSON document:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;/jselement&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;title&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;Multiply&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;menu&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;element&quot;</span><span style="color: #f8f8f2">: [</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;multiplier&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;3 &amp;times; &quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;apply&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;number&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;posterior&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;none&quot;</span>
<span style="color: #f8f8f2">    },</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;op&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACButton&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot; = &quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;action&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;multi()&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;posterior&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;none&quot;</span>
<span style="color: #f8f8f2">    },</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;answer&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACText&quot;</span>
<span style="color: #f8f8f2">    },</span>
<span style="color: #f8f8f2">    {</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;js&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;ACElement&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">      </span><span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;&lt;script type=&#39;text/javascript&#39;&gt;function multi() {document.getElementById(&#39;answer&#39;).innerHTML=3*document.getElementById(&#39;multiplier&#39;).value;}&lt;/script&gt;&quot;</span>
<span style="color: #f8f8f2">    }</span>
<span style="color: #f8f8f2">  ]</span>
<span style="color: #f8f8f2">}  </span>
</code></pre></div>
<p>An input field for a <code>multiplier</code> is defined by AutoConnectInput. The field for displaying the results exists with the name <code>answer</code>. The multiplication function is what AutoConnectElement has as JavaScript and it has the following content:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">function</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">multi</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  document.</span><span style="color: #a6e22e">getElementById</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;answer&#39;</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">innerHTML</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #ae81ff">3</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">*</span><span style="color: #f8f8f2"> document.</span><span style="color: #a6e22e">getElementById</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;multiplier&#39;</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">value</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>And the action for calling the <code>multi()</code> function is the <code>=</code> labeled button as the AutoConnectButton element. AutoConnect generates the <a href="acjson.html#name"><strong>name</strong></a> attribute of each AutoConnectElement as the <strong>Id</strong> of the HTML tag. The Id should be useful for DOM access.</p>
<div class="admonition warning">
<p class="admonition-title">JavaScript that is too long can cause insufficient memory</p>
<p>If it reaches thousands of bytes, AutoConnect will not be able to complete the HTML generation for the page.</p>
</div>
<h2 id="custom-web-pages-communication-without-page-transitions">Custom Web pages communication without page transitions<a class="headerlink" href="#custom-web-pages-communication-without-page-transitions" title="Permanent link">&para;</a></h2>
<p>The request-response form typically provided by AutoConnectAux is based on stateless HTTP page transitions. Its communication between custom Web pages and sketches involves page transitions in the client browser via the request-response form. However, major Web browsers support HTTP asynchronous communication without page transitions. By embedding those <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web APIs</a> in your custom Web pages, you can implement sketches that do not disrupt the user working flow with page transitions.</p>
<p>There are two types of Web APIs that allow asynchronous communication that can be used with AutoConnectAux:</p>
<ul>
<li>
<p><strong>XMLHttpRequest</strong></p>
<p>JavaScript embedded in a custom web page uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> (XHR) objects to communicate with the request handler on the sketch side. A sketch typically embeds its JavaScript coded as a string value with <a href="apielements.html#autoconnectelement">AutoConnectElement</a> into a custom web page JSON description.</p>
<p>The request handler that is communication partner with the above JavaScript should be implemented in the sketch as the <a href="https://github.com/esp8266/Arduino/blob/master/libraries/ESP8266WebServer/README.rst#client-request-handlers">Client request handlers</a> of the ESP8266WebServer (WebServer for ESP32) class.</p>
<p>The procedure for implementing a sketch in this manner is described in a <a href="#communicate-with-the-sketch-using-xhr">subsequent section</a>.</p>
</li>
<li>
<p><strong>Fetch API</strong></p>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">Fetch API</a> supported by AutoConnectAux is even easy to implement than <a href="https://developer.mozilla.org/en-US/docs/Glossary/XHR_(XMLHttpRequest)">XHR</a>. AutoConnectElements can execute Fetch API-driven JavaScript that can communicate with the server sketch. Its script will be triggered by <a href="acinteract.html#register-event-handling-for-autoconnectelements">expected events</a> and automatically be embedded into the HTML source of your custom web page by AutoConnect.</p>
<p>Also, the sketch process with which the above Fetch API script communicates can access and update the values and properties of each AutoConnectElement. Updated AutoConnectElement contents are immediately reflected on the custom web page by sending a response.</p>
<p>The Fetch API-driven approach based on AutoConnectElements event firing is described in the section of <a href="#interact-with-sketches-by-autoconnectelements-event">Interact with sketches by AutoConnectElements event</a>.</p>
</li>
</ul>
<h3 id="communicate-with-the-sketch-using-xhr"><i class="fas fa-globe"></i> Communicate with the Sketch using XHR<a class="headerlink" href="#communicate-with-the-sketch-using-xhr" title="Permanent link">&para;</a></h3>
<p>AutoConnectElement allows having scripts that make HTTP sessions based on <a href="https://en.wikipedia.org/wiki/XMLHttpRequest"><strong>XHR</strong></a>. XHR (<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>) is a JavaScript API to create AJAX requests. Its methods allow sending network requests between the browser and a server. The sketch implements the server-side process as a response handler to a standard HTTP request and can equip it with a dynamic custom Web page. This technique is tricky but is useful when implementing dynamic pages because it does not cause page transitions. As a matter of fact, <a href="otabrowser.html#updates-with-the-web-browserupdated-wv115">AutoConnectOTA</a> class is implemented with this technique and is a custom web page by AutoConnectAux using XHR.</p>
<p>Here's a simple example of JavaScript-based on XHR and a server-side request handler. It's like a clock that displays the time in real-time on an AutoConnect custom web page. The sketch in the following example is roughly divided into two structures.<br />
The AutoConnectElement defined with the name <code>js</code> gets the server time with XHR and updates the response via the DOM with the AutoConnectText named <code>time</code> and substance is the following JavaScript:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">var</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">xhr</span><span style="color: #f8f8f2">;</span>

<span style="color: #66d9ef">function</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">clock</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  </span><span style="color: #a6e22e">xhr</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">open</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;GET&#39;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&#39;/clock&#39;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  </span><span style="color: #a6e22e">xhr</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">responseType</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&#39;text&#39;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">  </span><span style="color: #a6e22e">xhr</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">send</span><span style="color: #f8f8f2">();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #f8f8f2">window.</span><span style="color: #a6e22e">onclose</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">function</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  </span><span style="color: #a6e22e">xhr</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">abort</span><span style="color: #f8f8f2">();</span>
<span style="color: #f8f8f2">};</span>

<span style="color: #f8f8f2">window.</span><span style="color: #a6e22e">onload</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">function</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  </span><span style="color: #a6e22e">xhr</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">new</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">XMLHttpRequest</span><span style="color: #f8f8f2">();</span>
<span style="color: #f8f8f2">  </span><span style="color: #a6e22e">xhr</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">onreadystatechange</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">function</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">    </span><span style="color: #66d9ef">if</span><span style="color: #f8f8f2"> (</span><span style="color: #66d9ef">this</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">readyState</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">==</span><span style="color: #f8f8f2"> </span><span style="color: #ae81ff">4</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">&amp;&amp;</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">xhr</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">status</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">==</span><span style="color: #f8f8f2"> </span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">) {</span>
<span style="color: #f8f8f2">      document.</span><span style="color: #a6e22e">getElementById</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;time&#39;</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">innerHTML</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">this</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">responseText</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">    }</span>
<span style="color: #f8f8f2">  };</span>
<span style="color: #f8f8f2">  </span><span style="color: #a6e22e">setInterval</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">clock</span><span style="color: #f8f8f2">, </span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">};</span>
</code></pre></div>
<p>This script issues a GET request to <code>/clock</code> every second and updates the element of Id=<code>time</code> with the text content of its response. As this script shows, it will issue a send request using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> object.</p>
<p>The other component is located on the AutoConnect-hosted ESP8266WebServer server. This component gets the current time from the NTP server and sends the value as text to the client.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">auxClock</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">time_t</span><span style="color: #f8f8f2">  t;</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">struct</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">tm</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">*</span><span style="color: #f8f8f2">tm;</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2">    dateTime[</span><span style="color: #ae81ff">24</span><span style="color: #f8f8f2">];</span>

<span style="color: #f8f8f2">  t </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> time(NULL);</span>
<span style="color: #f8f8f2">  tm </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> localtime(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">t);</span>
<span style="color: #f8f8f2">  sprintf(dateTime, </span><span style="color: #e6db74">&quot;%04d/%02d/%02d %02d:%02d:%02d.&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">                    tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_year </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #ae81ff">1900</span><span style="color: #f8f8f2">, tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_mon </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #ae81ff">1</span><span style="color: #f8f8f2">, tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_mday,</span>
<span style="color: #f8f8f2">                    tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_hour, tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_min, tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_sec);</span>
<span style="color: #f8f8f2">  server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;text/plain&quot;</span><span style="color: #f8f8f2">, dateTime);</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p>Then just register the <code>auxClock</code> function as a <code>/clock</code> URL handler with the hosted ESP8266Server instance.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">server.on(</span><span style="color: #e6db74">&quot;/clock&quot;</span><span style="color: #f8f8f2">, auxClock);</span>
</code></pre></div>
<p>As you can see from the above two components, AutoConnect does not intervene in those communications and no page transitions occur. A complete sketch that integrates the above components and includes a custom Web page declaration for time display looks like this:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;Arduino.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;time.h&gt;</span>

<span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> JSPAGE[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;&#39;(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/jselement&quot;,</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Clock&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: true,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;time&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACText&quot;</span>
<span style="color: #e6db74">    },</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;js&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACElement&quot;,</span>
<span style="color: #e6db74">      &quot;value&quot;: &quot;&lt;script type=&#39;text/javascript&#39;&gt;var xhr;function clock(){xhr.open(&#39;GET&#39;, &#39;/clock&#39;);xhr.responseType=&#39;text&#39;;xhr.send();}window.onclose=function(){xhr.abort();};window.onload=function(){xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4&amp;&amp;xhr.status==200){document.getElementById(&#39;time&#39;).innerHTML=this.responseText;}};setInterval(clock,1000);};&lt;/script&gt;&quot;</span>
<span style="color: #e6db74">    }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}  </span>
<span style="color: #e6db74">)&#39;&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">ESP8266WebServer  server;</span>
<span style="color: #f8f8f2">AutoConnect </span><span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">auxClock</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">time_t</span><span style="color: #f8f8f2">  t;</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">struct</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">tm</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">*</span><span style="color: #f8f8f2">tm;</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2">    dateTime[</span><span style="color: #ae81ff">24</span><span style="color: #f8f8f2">];</span>

<span style="color: #f8f8f2">  t </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> time(NULL);</span>
<span style="color: #f8f8f2">  tm </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> localtime(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">t);</span>
<span style="color: #f8f8f2">  sprintf(dateTime, </span><span style="color: #e6db74">&quot;%04d/%02d/%02d %02d:%02d:%02d.&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">                    tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_year </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #ae81ff">1900</span><span style="color: #f8f8f2">, tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_mon </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> </span><span style="color: #ae81ff">1</span><span style="color: #f8f8f2">, tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_mday,</span>
<span style="color: #f8f8f2">                    tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_hour, tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_min, tm</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">tm_sec);</span>
<span style="color: #f8f8f2">  server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;text/plain&quot;</span><span style="color: #f8f8f2">, dateTime);</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  portal.load(FPSTR(JSPAGE));</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">if</span><span style="color: #f8f8f2"> (portal.begin()) {</span>
<span style="color: #f8f8f2">    server.on(</span><span style="color: #e6db74">&quot;/clock&quot;</span><span style="color: #f8f8f2">, auxClock);</span>
<span style="color: #f8f8f2">    configTime(</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">, </span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;europe.pool.ntp.org&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  }</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<h3 id="interact-with-sketches-by-autoconnectelements-event"><i class="fas fa-exchange-alt"></i> Interact with sketches by AutoConnectElements event<a class="headerlink" href="#interact-with-sketches-by-autoconnectelements-event" title="Permanent link">&para;</a></h3>
<p>AutoConnectAux supports <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> besides <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> for communication between the client browser and the ESP module. This allows your sketches to get and change values and properties of AutoConnectElements without a page transition on the browser. The changed values and properties are immediately reflected in the page currently being viewed in the browser.</p>
<p>The following screenshot shows that a custom web page using the Fetch API can blink the LED on the ESP module without any page transitions. And it allows the custom web page changes the text color and button caption in sync with the LED flashing.</p>
<p><img data-gifffer="images/fetch_led.gif" data-gifffer-width="636" data-gifffer-height="290"/></p>
<p>The sketch implemented for the above demonstration does not need to write JavaScript code to handle the Fetch API. Its Fetch API script will automatically be embedded in the HTML source of your custom web page by AutoConnect. All you need to do is describe your custom web page in JSON and write AutoConnectElements event handlers to apply to user interaction. </p>
<p>How to sketch with the AutoConnectElements events is covered in detail in chapter <a href="acinteract.html">Interact with Sketch and AutoConnectElements</a>.</p>
<h2 id="transitions-of-the-custom-web-pages">Transitions of the custom Web pages<a class="headerlink" href="#transitions-of-the-custom-web-pages" title="Permanent link">&para;</a></h2>
<h3 id="scope-lifetime-of-autoconnectaux">Scope &amp; Lifetime of AutoConnectAux<a class="headerlink" href="#scope-lifetime-of-autoconnectaux" title="Permanent link">&para;</a></h3>
<p>AutoConnectAux and AutoConnectElements must live while the custom Web pages are available. The implementation of the custom Web page inherits from requestHandler driven from ESP8266WebServer (WebServer for ESP32), so the instance of AutoConnectAux and AutoConnectElements must exist for the duration of effect of handleClient. The following example is incorrect for manipulating custom Web pages. Its AutoConnectAux instance will be destructed at the exit of the setup().</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnect.h&gt;</span>

<span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> auxPage[] PROGMEM </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;raw(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Page-1&quot;,</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/page1&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: true,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    { &quot;name&quot;:&quot;Server&quot;, &quot;type&quot;:&quot;ACText&quot;, &quot;label&quot;:&quot;Server address&quot; }</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">AutoConnect  portal;</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  </span><span style="color: #75715e">// This declaration is wrong.</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">  AutoConnectAux aux;</span>
</span><span style="color: #f8f8f2">  aux.load(auxPage);</span>
<span style="color: #f8f8f2">  portal.join(aux);</span>
<span style="color: #f8f8f2">  portal.begin();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<h3 id="the-uri-of-the-custom-web-pages">The URI of the custom Web pages<a class="headerlink" href="#the-uri-of-the-custom-web-pages" title="Permanent link">&para;</a></h3>
<p>The transition of the custom Web page follows the URI of the page, but the ESP8266WebServer class does not know the URI of an AutoConnectAux page. (Registering a custom Web page does not use the <em>ESP8266WebServer::on</em>/<em>WebServer::on</em> function.) Therefore ESP8266WebServer class does not detect its URI access. If you want to detect an http request to AutoConnectAux's custom Web page, you need to register its URI with the <a href="apiaux.html#on">AutoConnectAux::on</a> function.</p>
<p>In addition to this, there are restrictions in the handler for the custom Web page as shown in the following section.</p>
<h3 id="an-http-response-from-the-custom-web-page-handler">An HTTP response from the custom Web page handler<a class="headerlink" href="#an-http-response-from-the-custom-web-page-handler" title="Permanent link">&para;</a></h3>
<p>Normally, a custom web page handler does not need to respond to a request from the client. Its HTTP response will be sent by AutoConnect when it returns from the custom web page handler. In that case, the HTTP response code is 200.</p>
<p>However, this structure requires AutoConnectAux to always respond with the page content. If AutoConnectAux does not have page content as an HTTP response, then the custom web page handler can respond with its own HTTP response by following the steps:</p>
<ol>
<li>
<p>Declare an <a href="apiaux.html#autoconnectaux">AutoConnectAux</a> with the <code>responsive</code> argument set to <code>false</code>, or describe <code class="highlight"><span style="color: #e6db74">&quot;response&quot;</span><span style="color: #f92672">:</span><span style="color: #66d9ef">false</span></code> with JSON:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnectAux aux(</span><span style="color: #e6db74">&quot;/aux&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;AUX&quot;</span><span style="color: #f8f8f2">, false, {}, false);</span>
</code></pre></div>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;title&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;AUX&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #e6db74">&quot;/aux&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;response&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #66d9ef">false</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #f92672">&quot;menu&quot;</span><span style="color: #f8f8f2">: </span><span style="color: #66d9ef">false</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
</li>
<li>
<p>Send an HTTP response from a custom web page handler (Case of ESP32):</p>
<p><div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">WebServer   server;</span>
<span style="color: #f8f8f2">AutoConnect </span><span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span>

<span style="color: #f8f8f2">String </span><span style="color: #a6e22e">handleAux</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  server.send(</span><span style="color: #ae81ff">202</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;text/plain&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;Accepted&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #f8f8f2">portal.on(</span><span style="color: #e6db74">&quot;/aux&quot;</span><span style="color: #f8f8f2">, handleAux);</span>
</code></pre></div>
If you want to respond with a <a href="https://datatracker.ietf.org/doc/html/rfc7231#section-6.4.3">302</a> from a custom web page handler, you can use the <a href="apiaux.html#redirect">AutoConnectAux::redirect</a> function.
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">String </span><span style="color: #a6e22e">handleAux</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> aux, PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2"> args) {</span>
<span style="color: #f8f8f2">  aux.redirect(</span><span style="color: #e6db74">&quot;http://redirect.url:port/?query&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">return</span><span style="color: #f8f8f2"> String();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div></p>
</li>
</ol>
<h3 id="limitations">Limitations<a class="headerlink" href="#limitations" title="Permanent link">&para;</a></h3>
<p>The custom Web pages handler has the following limitations.</p>
<ul>
<li>
<p>Do not send HTTP responses from the handler.</p>
<p>If the handler returns its own response, the custom Web page will be lost.</p>
</li>
<li>
<p>Use AutoConnectSubmit whenever possible.</p>
<p>AutoConnect will hold the values of a custom Web Page is sent by AutoConnectSubmit.</p>
</li>
<li>
<p>Can not handle the custom Web pages during a connection is not established yet.</p>
<p>During the connection attempt, the web browser of the client will send a probe for a captive portal. Its request will cause unintended custom Web page transitions.</p>
</li>
<li>
<p>Can not place URI of the custom Web pages to AUTOCONNECT_URI.</p>
<p>AutoConnect will not work if you place a custom Web page to <a href="api.html#defined-macros">AUTOCONNECT_URI</a>.</p>
</li>
<li>
<p>Can not use the element named <strong>SUBMIT</strong>.</p>
<p>You can not use 'SUBMIT' as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element. (Case sensitive ignored) AutoConnect does not rely on the <code>input type=submit</code> element for the form submission and uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit">HTML form element submit</a> function instead. So, the submit function will fail if there is an element named 'submit' in the form.</p>
</li>
</ul>
<div class="admonition caution">
<p class="admonition-title">Do not handle for the same page</p>
<p>Do not duplicate AutoConnect::on with ESP8266WebServer::on (also WebServer::on) for the same custom web page.</p>
</div>
<script>
  window.onload = function() {
    Gifffer();
  };
</script>

<div class="footnote">
<hr />
<ol>
<li id="fn:1">
<p>The valid scope of the name is within an AutoConnectAux.&#160;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
<li id="fn:2">
<p>Regular expression specification as a pattern of AutoConnectInput is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript compliant</a>.&#160;<a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">&#8617;</a></p>
</li>
</ol>
</div>


  




                
              </article>
            </div>
          
          
        </div>
        
          <a href="#" class="md-top md-icon" data-md-component="top" hidden>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
            Back to top
          </a>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2018-2023 Hieromon Ikasamo
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
        <div class="md-social">
  
    
    
      
      
    
    <a href="https://github.com/Hieromon" target="_blank" rel="noopener" title="github.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
    </a>
  
    
    
      
      
    
    <a href="https://twitter.com/hieromon" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    <script id="__config" type="application/json">{"base": ".", "features": ["navigation.top"], "search": "assets/javascripts/workers/search.db81ec45.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="assets/javascripts/bundle.a00a7c5e.min.js"></script>
      
        <script src="js/gifffer.min.js"></script>
      
    
  </body>
</html>